@charset "utf-8";
.wrap {
	overflow: hidden;
}
/* ------------------------------------------------------------------------------------------------------------- */
/* timer */
.timer_page {
	padding-top: 74px;
}
.timer_title {
	position: absolute;
	left: 357px;
	top: 82px;
	width: 880px;
	height: 156px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('../img/timer_title_bg.png') no-repeat center center;
	box-shadow: 0 9px 33px rgba(136, 172, 170, 0.69);
	border-radius: 57px;
	overflow: hidden;
	z-index: 3;
}
.timer_title input {
	width: 848px;
	height: 124px;
	background: transparent;
	border: none;
	outline: none;
	color: #333333;
	font-size: 50px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	letter-spacing: -2.5px;
}
.timer_title input::placeholder {
	color: #333333;
}
.timer_frame {
	position: absolute;
	left: 43px;
	top: 105px;
	width: 1313px;
	height: 732px;
	background: url('../img/toolsTimerFrame.png');
}

.timer_frame .num_box {
	position: absolute;
	left: 95px;
	top: 60px;
	width: 530px;
	height: 530px;
	text-align: center;
}

.timer_frame .num_box.sec {
	left: auto;
	right: 90px;
}

.timer_frame .num_box .num {
	width: 100%;
	height: 488px;
	color: #fff;
	font-size: 280px;
	letter-spacing: 23px;
	text-shadow: 7px 16px 20px rgba(196, 216, 214, 0.72);
}

.timer_frame .num_box .txt {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0px;
	color: #333;
	font-size: 40px;
	font-weight: 900;
	font-family: 'NanumSquareRound';
	text-shadow: 0px 8px 20px rgba(152, 152, 152, 0.1);
	opacity: 0.4;
}

/* timer_setting */
.timer_setting {
	position: absolute;
	right: 80px;
	top: 188px;
}

.timer_setting .txt {
	/* display: none; */
	width: 330px;
	height: 46px;
	margin-bottom: 36px;
	color: #333;
	text-align: center;
	font-size: 37px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	text-shadow: 0 1px 4px rgba(11, 100, 74, 0.15);
	letter-spacing: -1.85px;
}

.timer_setting .btn_list {
	overflow: hidden;
}

.timer_setting .btn_list li {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.timer_setting .btn_list li:nth-child(2n) {
	margin-right: 0;
}

.timer_setting .btn_list li:nth-child(2n + 1) {
	clear: both;
}

.timer_setting .btn_list li:nth-last-child(-n + 2) {
	margin-bottom: 0;
}

.timer_setting .btn_list li button {
	width: 161px;
	height: 101px;
	background: url('../img/toolsTimeBtn1.png') no-repeat left top;
	font-size: 0;
	cursor: pointer;
}

.timer_setting .btn_list li:nth-child(2) button {
	background: url('../img/toolsTimeBtn2.png') no-repeat left top;
}

.timer_setting .btn_list li:nth-child(3) button {
	background: url('../img/toolsTimeBtn3.png') no-repeat left top;
}

.timer_setting .btn_list li:nth-child(4) button {
	background: url('../img/toolsTimeBtn4.png') no-repeat left top;
}

.timer_setting .input_set {
	position: relative;
	left: 5px;
	/*overflow: hidden;*/
	width: 332px;
	height: 91px;
	line-height: 91px;
	margin-top: 20px;
	margin-left: -14px;
	padding: 2px 26px 0 25px;
	background-color: #fff;
	border-radius: 30px;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.timer_setting .input_set .tit {
	font-family: 'NanumSquareRound';
	font-size: 35px;
	color: #333;
	font-weight: 900;
}

.timer_setting .input_set .input_box {
	font-size: 40px;
	font-family: 'NanumSquareRound';
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666666;
	font-size: 40px;
	width: 138px;
	height: 59px;
	background: #f1f1f1;
	border-radius: 14px;
}

.timer_setting .input_set .input_box input {
	color: #666666;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	width: 50px;
	font-size: 40px;
}

/* timer_set_start */
.timer_set_start {
	position: absolute;
	right: 65px;
	bottom: 20px;
	width: 323px;
	font-size: 0;
	bottom: auto;
}

.timer_set_start .start {
	width: 323px;
	height: 125px;
	background: url('../img/toolsTimerStart.png');
}

.timer_set_start .start.stop {
	background-image: url('../img/toolsTimerStop.png');
}

.timer_set_start .reset {
	width: 74px;
	height: 74px;
	background: url('../img/toolsTimerReset.png');
}

.timer_set_start .sizer {
	width: 154px;
	height: 84px;
	background: url('../img/toolsTimerSizer.png');
}

.activity .timer_set_start .sizer {
	width: 74px;
	height: 74px;
	background: url('../img/toolsTimerSizer.png');
	margin-left: 20px;
}
.timer_set_start #btn_resize {
	display: inline-block;
}

.timer_set_start #btn_resize_min {
	display: none;
}

.timer_page.analog .timer_set_start {
	position: absolute;
	right: 80px;
	top: auto;
	bottom: 221px;
	padding-left: 0;
	width: 332px;
	font-size: 0;
}
.timer_page.analog .timer_set_start1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.timer_page.analog .timer_set_start2 {
	font-size: 0;
	text-align: center;
	position: absolute;
	right: 50px;
	top: auto;
	bottom: 32px;
	padding-left: 0;
	font-size: 0;
	width: auto;
}

.timer_page.analog .timer_set_start .start {
	width: 248px;
	height: 101px;
	background: url('../img/toolsTimerStart.png') no-repeat center center;
}

.timer_page.analog .timer_set_start .start.stop {
	background: url('../img/toolsTimerStop.png') no-repeat center center;
}

.timer_page.analog .timer_set_start .reset {
	width: 74px;
	height: 74px;
	background: url('../img/toolsTimerReset.png') no-repeat center center;
}

/* timer_end_popup */
.timer_end_popup {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 200;
	background-color: rgba(0, 0, 0, 0.65);
	font-size: 0;
	text-align: center;
	height: 115%;
	top: -20px;
}

.timer_end_popup:after {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.timer_end_popup .inner_box {
	display: inline-block;
	position: relative;
	width: 1104px;
	height: 753px;
	background: url('../img/toolsTimerEndPop.png') no-repeat center center;
	vertical-align: middle;
}

.timer_end_popup .inner_box p {
	width: 800px;
	margin: 365px auto 0;
	font-size: 74px;
	font-weight: 700;
	word-break: keep-all;
	overflow: hidden;
}

.timer_end_popup .inner_box button {
	position: absolute;
	right: 80px;
	top: 135px;
	width: 49px;
	height: 51px;
	background: url('../img/toolsPopClose.png');
}

/* timer_sound_set */
.timer_sound_set {
	position: absolute;
	left: 65px;
	bottom: 32px;
	padding-left: 32px;
	height: 74px;
	z-index: 10;
}

.timer_sound_set .all_btn {
	display: block;
	position: absolute;
	z-index: 2;
	left: 0;
	top: 50%;
	width: 74px;
	height: 74px;
	margin-top: -42px;
	background: url('../img/toolsSound.png') center center no-repeat;
}

.timer_sound_set .all_btn.off {
	background-image: url('../img/toolsSoundOff.png');
}

.timer_sound_set .chk_each_box {
	height: 64px;
	line-height: 64px;
	padding-left: 65px;
	padding-right: 38px;
	background-color: #fff;
	border-radius: 32px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.timer_sound_set .chk_each_box .chk_each {
	display: inline-block;
	margin-right: 25px;
	vertical-align: middle;
}

.timer_sound_set .chk_each_box .chk_each:last-child {
	margin-right: 0 !important;
}

.timer_sound_set .chk_each label {
	position: relative;
	z-index: 1;
	padding-left: 35px;
	color: #666666;
	font-size: 28px;
	font-weight: 900;
	cursor: pointer;
}

.timer_sound_set .chk_each .vchkbox {
	display: block;
	position: absolute;
	left: 0;
	top: 2px;
	z-index: 1;
	width: 27px;
	height: 27px;
	background: url('../img/toolsChk-bg.png') center center no-repeat;
	border-radius: 7px;
}

.timer_sound_set .chk_each input {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0, 0, 0, 0);
	font-size: 1px;
}

.timer_sound_set .chk_each input:checked + label .vchkbox {
	background: url('../img/toolsChk.png') center center no-repeat,
		url('../img/toolsChk-bg.png') center center no-repeat;
}

/* timer_auto_set */
.timer_auto_set {
	position: absolute;
	right: 50px;
	top: 68px;
	height: 64px;
}

.timer_auto_set .chk_each_box {
	height: 100%;
	width: 334px;
	line-height: 64px;
	padding-left: 40px;
	padding-right: 40px;
	background-color: #fff;
	border-radius: 50px;
}

.timer_auto_set .chk_each_box label {
	position: relative;
	z-index: 1;
	padding-left: 35px;
	color: #666;
	font-size: 28px;
	font-weight: 900;
	cursor: pointer;
	font-family: 'NanumSquareRound';
	letter-spacing: -2px;
}

.timer_auto_set .chk_each_box .vchkbox {
	display: block;
	position: absolute;
	left: 0;
	top: 2px;
	z-index: 1;
	width: 27px;
	height: 27px;
	background: url(../img/toolsChk-bg.png) center center no-repeat;
	border-radius: 7px;
}

.timer_auto_set .chk_each_box input {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0, 0, 0, 0);
	font-size: 1px;
}

.timer_auto_set .chk_each_box input:checked + label .vchkbox {
	background: url('../img/toolsChk.png') center center no-repeat,
		url('../img/toolsChk-bg.png') center center no-repeat;
}

/* timer_end_alert */
.timer_page.digital .timer_end_alert {
	display: flex !important;
	align-items: center;
}
.timer_end_alert {
	overflow: hidden;
	border-radius: 27px;
	display: flex;
	align-items: center;
}

.timer_end_alert .tit {
	display: block;
	height: 64px;
	line-height: 64px;
}
.timer_sound_set .timer_end_alert .chk_each {
	margin-right: 10px;
}
.timer_end_alert .chk_each input {
	font-family: 'NanumSquareRound';
}
/* .timer_end_alert .chk_each label {
    position: relative;
    z-index: 1;
    padding-left: 35px;
    font-family: 'NanumSquareRound';
    font-weight: 900;
    font-size: 27.5px;
    color: #666666;
    cursor: pointer;
} */

/* .timer_end_alert .chk_each .vchkbox {
    display: block;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.timer_end_alert .chk_each input {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    font-size: 1px;
} */

/* .timer_end_alert .chk_each input:checked + label .vchkbox {
    background-image: url('../img/toolsChk.png');
    background-position: center;
    background-repeat: no-repeat;
} */

.timer_end_alert .txt {
	width: 311px;
	height: 37.5px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 22px;
	color: #b0b0b2;
	background: #f1f1f1;
	border-radius: 7.5px;
	padding: 0 18px;
	letter-spacing: -1.05px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* timer pie */
.timer_frame_pie {
	position: relative;
	position: absolute;
	left: 411px;
	top: 155px;
	width: 746px;
	height: 746px;
	background: url('../img/toolsClockFrame.png') no-repeat 50% 50%;
}
.timer_frame_pie_inner {
	position: absolute;
	left: 143px;
	top: 163px;
	width: 462px;
	height: 463px;
	background: url('../img/toolsPieFrame.png') no-repeat 50% 50%;
	z-index: 2;
}
.timer_frame_pie svg {
	width: 650px !important;
	height: 650px !important;
	left: 49px;
	top: 68px;
}
.timer_frame_pie canvas {
	width: 650px !important;
	height: 650px !important;
	left: 48px;
	top: 71px;
}
.timer_frame_pie .hand {
	position: absolute;
	left: 326px;
	/* top: 215px; */
	top: 212px;
	z-index: 2;
	width: 93px;
	height: 236px;
	background: url('../img/toolsPieHand.png') no-repeat center center;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 50% 210px;
	transform-origin: 50% 184px;
	z-index: 3;
}

.circle_fill_ui {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	overflow: hidden;
	width: 454px;
	height: 454px;
	margin-left: -227px;
	margin-top: -227px;
	border-radius: 50%;
}

.circle_fill_ui .circle_con {
	position: relative;
	z-index: 2;
	height: 100%;
	background-color: #fff;
	border-radius: 50%;
	font-size: 0;
	text-align: center;
}

.circle_fill_ui .circle_con:after {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.circle_fill_ui .circle_con .in {
	display: inline-block;
	font-size: 14px;
	vertical-align: middle;
}

.circle_fill_ui .circle_con .in .type {
	display: block;
	margin-bottom: 1px;
	font-size: 13px;
}

.circle_fill_ui .circle_con .in .unit_num {
	display: block;
	color: #536cd9;
	font-family: 'Roboto', 'Noto Sans KR';
	font-weight: 500;
}

.circle_fill_ui .circle_con .in .unit_num .unit {
	display: block;
	font-size: 12px;
}

.circle_fill_ui .half {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	overflow: hidden;
	width: 50%;
	height: 100%;
}

.circle_fill_ui .half .fill {
	display: block;
	position: absolute;
	right: 100%;
	top: 50%;
	width: 100%;
	height: 100%;
	margin-top: -100%;
	background-color: #f93333;
	transform: rotate(0deg);
	transform-origin: right center;
}

.circle_fill_ui .half.two {
	right: calc(50% - 1px);
}

.circle_fill_ui .half.two .fill {
	right: auto;
	left: 100%;
	transform: rotate(0deg);
	transform-origin: left center;
}

.timer_page.clock .input_set.hide {
	display: none !important;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* timer analog */
.timer_frame_analog {
	position: absolute;
	left: 411px;
	top: 175px;
	width: 746px;
	height: 746px;
	background: url('../img/toolsClockFrame.png') no-repeat 54px 51px;
}

.timer_frame_analog .grad {
	position: absolute;
	left: 112px;
	top: 112px;
	z-index: 2;
	width: 523px;
	height: 523px;
	background: url(../img/toolsClockGrad.png) no-repeat 50% 50%;
}

.timer_frame_analog .grad canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100% !important;
}

.timer_frame_analog .hand_box {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 83px;
	height: 100px;
	margin-left: -41px;
	margin-top: -50px;
	/* background: url('../img/toolsClockCenBg.png') no-repeat 50% 98%; */
}

.timer_frame_analog .hand_box .center {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 4;
	width: 38px;
	height: 38px;
	transform: translate(-50%, -50%);
	background: url('../img/toolsClockCen.png') no-repeat center center;
}

.timer_frame_analog .hand1_1,
.timer_frame_analog .hand2_1 {
	position: absolute;
	left: 50%;
	bottom: 50%;
	z-index: 2;
	width: 32px;
	height: 139px;
	margin-left: -16px;
	margin-bottom: -12px;
	background: url('../img/toolsClockHand1.png') no-repeat 50% 0;
	transform-origin: 50% 129px;
}

.timer_frame_analog .hand2_1 {
	background-image: url('../img/toolsClockHand1_on.png');
}

.timer_frame_analog .hand1_2,
.timer_frame_analog .hand2_2 {
	position: absolute;
	left: 50%;
	bottom: 50%;
	z-index: 3;
	width: 26px;
	height: 198px;
	margin-left: -13px;
	margin-bottom: -8px;
	background: url('../img/toolsClockHand2.png') no-repeat 50% 0;
	transform-origin: 50% 190px;
}

.timer_frame_analog .hand2_2 {
	background-image: url('../img/toolsClockHand2_on.png');
}

.timer_frame_analog .hand3,
.timer_frame_analog .hand3_2 {
	position: absolute;
	left: 50%;
	bottom: 50%;
	width: 10px;
	height: 212px;
	margin-left: -5px;
	margin-bottom: -15px;
	background: url('../img/toolsClockHand3.png') no-repeat 50% 50%;
	transform-origin: 47% 195px;
}

.timer_frame_analog .hand3_2 {
	background-image: url('../img/toolsClockHand3_on.png');
}

.timer_frame_analog .circle_fill_ui {
	width: 658px;
	height: 658px;
	margin-left: -329px;
	margin-top: -329px;
}

.timer_frame_analog .circle_fill_ui .half .fill {
	background-color: rgba(249, 118, 100, 0.75);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* timer activity */
.activity_page {
	padding-top: 74px;
}

.activity_page .timer_set_start {
	width: auto;
	white-space: nowrap;
	bottom: 20px;
	right: 50px;
	top: auto;
}

.activity_page .timer_set_start .start {
	width: 248px;
	height: 101px;
	background: url('../img/toolsTimerStart.png') no-repeat center center;
	margin: 0 14px 0 0;
}

.activity_page .timer_set_start .start.stop {
	background: url('../img/toolsTimerStop.png') no-repeat center center;
}

.activity_frame {
	position: absolute;
	left: 50%;
	margin-left: -436px;
	top: 42px;
	z-index: 2;
	padding: 25px 0 0;
	width: 872px;
	height: 435px;
	background: url('../img/toolsTimerPass.png') no-repeat 50% 50%;
}

.activity_frame .title {
	width: 575px;
	height: 76px;
	line-height: 82px;
	text-align: center;
	font-family: 'NanumSquareRound';
	font-weight: 700;
	font-size: 40px;
	color: #005b8d;
	margin: 57px auto 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.activity_frame .time {
	padding: 5px 25px 0 26px;
	width: 611px;
	height: 248px;
	overflow: hidden;
	margin: 0 auto;
}

.activity_frame .time .num_box {
	float: left;
	width: 234px;
	height: 180px;
	line-height: 1;
	text-align: center;
	font-family: 'NanumGothic EB';
	font-weight: 700;
	font-size: 180px;
	color: #333;
	letter-spacing: 2px;
	text-shadow: 7px 16px 20px rgba(196, 216, 214, 0.72);
	position: relative;
	z-index: 100;
	letter-spacing: -8px;
	margin-left: -21px;
}

.activity_frame .time .num_box ~ .num_box {
	float: right;
}

.activity_race {
	position: absolute;
	left: 0;
	bottom: 219px;
	width: 100%;
	height: 497px;
	/* background: url('../img/toolsTimerRaceBg.png') no-repeat 50% 0; */
}
.activity_race .goal {
	position: absolute;
	right: 45px;
	bottom: 10px;
	font-size: 50px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	color: #51c1ff;
}
.activity_race:before {
	content: '';
	position: absolute;
	left: 260px;
	top: 0px;
	z-index: 1;
	display: block;
	width: 5px;
	height: 495px;
	background: #72ccff;
}
.activity_race.active:after {
	content: '';
	position: relative;
	width: 100%;
	height: 356px;
	background: rgba(55, 183, 255, 0.3);
	position: absolute;
	left: 0;
	bottom: 0;
}
.activity_race .path_way {
	position: absolute;
	left: 260px;
	top: 0;
	width: 1400px;
	height: 100%;
}

/* .activity_race .path_way.active:before,
.activity_race .path_way.end:before {
    height: 356px;
    background: rgba(55, 183, 255, 0.3);
    position: absolute;
    left: -260px;
    bottom: 0;
    content: '';
    display: block;
    width: 260px;
}
.activity_race .path_way:after {
    width: 0;
    height: 356px;
    background: rgba(55, 183, 255, 0.3);
    position: absolute;
    left: 100%;
    bottom: 0;
    content: '';
    display: block;
    opacity: 0;
    transition: width 0.2s ease-in-out 0.3s;
}
.activity_race .path_way.end:after {
    opacity: 1;
    width: 260px;
} */
.activity_race .pass_charactor {
	position: absolute;
	left: 0;
	margin-left: -200px;
	top: 246px;
	z-index: 2;
	width: 400px;
	height: 220px;
	background: url('../img/play_spritesheet.png') no-repeat 0 0;
	animation: swim 3.85s steps(1) infinite;
	background-size: 3600px 1980px;
}

.activity_race .pass_charactor.active {
	left: 0;
	/* background: url('../img/play_spritesheet.png') no-repeat 0 0;
    animation: swim 3.85s steps(1) infinite;
    background-size: 3600px 1980px; */
}

.activity_race .path_way.active .step_area .add_btn,
.activity_race .path_way.active .step_area .act_box .del_btn {
	display: none;
}

@keyframes swim {
	0% {
		background-position: 0 0;
	}
	1.2987% {
		background-position: -400px 0;
	}
	2.5974% {
		background-position: -800px 0;
	}
	3.8961% {
		background-position: -1200px 0;
	}
	5.1948% {
		background-position: -1600px 0;
	}
	6.4935% {
		background-position: -2000px 0;
	}
	7.7922% {
		background-position: -2400px 0;
	}
	9.0909% {
		background-position: -2800px 0;
	}
	10.3896% {
		background-position: -3200px 0;
	}
	11.6883% {
		background-position: 0 -220px;
	}
	12.9870% {
		background-position: -400px -220px;
	}
	14.2857% {
		background-position: -800px -220px;
	}
	15.5844% {
		background-position: -1200px -220px;
	}
	16.8831% {
		background-position: -1600px -220px;
	}
	18.1818% {
		background-position: -2000px -220px;
	}
	19.4805% {
		background-position: -2400px -220px;
	}
	20.7792% {
		background-position: -2800px -220px;
	}
	22.0779% {
		background-position: -3200px -220px;
	}
	23.3766% {
		background-position: 0 -440px;
	}
	24.6753% {
		background-position: -400px -440px;
	}
	25.9740% {
		background-position: -800px -440px;
	}
	27.2727% {
		background-position: -1200px -440px;
	}
	28.5714% {
		background-position: -1600px -440px;
	}
	29.8701% {
		background-position: -2000px -440px;
	}
	31.1688% {
		background-position: -2400px -440px;
	}
	32.4675% {
		background-position: -2800px -440px;
	}
	33.7662% {
		background-position: -3200px -440px;
	}
	35.0649% {
		background-position: 0 -660px;
	}
	36.3636% {
		background-position: -400px -660px;
	}
	37.6623% {
		background-position: -800px -660px;
	}
	38.9610% {
		background-position: -1200px -660px;
	}
	40.2597% {
		background-position: -1600px -660px;
	}
	41.5584% {
		background-position: -2000px -660px;
	}
	42.8571% {
		background-position: -2400px -660px;
	}
	44.1558% {
		background-position: -2800px -660px;
	}
	45.4545% {
		background-position: -3200px -660px;
	}
	46.7532% {
		background-position: 0 -880px;
	}
	48.0519% {
		background-position: -400px -880px;
	}
	49.3506% {
		background-position: -800px -880px;
	}
	50.6493% {
		background-position: -1200px -880px;
	}
	51.9480% {
		background-position: -1600px -880px;
	}
	53.2467% {
		background-position: -2000px -880px;
	}
	54.5454% {
		background-position: -2400px -880px;
	}
	55.8441% {
		background-position: -2800px -880px;
	}
	57.1428% {
		background-position: -3200px -880px;
	}
	58.4415% {
		background-position: 0 -1100px;
	}
	59.7402% {
		background-position: -400px -1100px;
	}
	61.0389% {
		background-position: -800px -1100px;
	}
	62.3376% {
		background-position: -1200px -1100px;
	}
	63.6363% {
		background-position: -1600px -1100px;
	}
	64.9350% {
		background-position: -2000px -1100px;
	}
	66.2337% {
		background-position: -2400px -1100px;
	}
	67.5324% {
		background-position: -2800px -1100px;
	}
	68.8311% {
		background-position: -3200px -1100px;
	}
	70.1298% {
		background-position: 0 -1320px;
	}
	71.4285% {
		background-position: -400px -1320px;
	}
	72.7272% {
		background-position: -800px -1320px;
	}
	74.0259% {
		background-position: -1200px -1320px;
	}
	75.3246% {
		background-position: -1600px -1320px;
	}
	76.6233% {
		background-position: -2000px -1320px;
	}
	77.9220% {
		background-position: -2400px -1320px;
	}
	79.2207% {
		background-position: -2800px -1320px;
	}
	80.5194% {
		background-position: -3200px -1320px;
	}
	81.8181% {
		background-position: 0 -1540px;
	}
	83.1168% {
		background-position: -400px -1540px;
	}
	84.4155% {
		background-position: -800px -1540px;
	}
	85.7142% {
		background-position: -1200px -1540px;
	}
	87.0129% {
		background-position: -1600px -1540px;
	}
	88.3116% {
		background-position: -2000px -1540px;
	}
	89.6103% {
		background-position: -2400px -1540px;
	}
	90.9090% {
		background-position: -2800px -1540px;
	}
	92.2077% {
		background-position: -3200px -1540px;
	}
	93.5064% {
		background-position: 0 -1760px;
	}
	94.8051% {
		background-position: -400px -1760px;
	}
	96.1038% {
		background-position: -800px -1760px;
	}
	97.4025% {
		background-position: -1200px -1760px;
	}
	98.7013% {
		background-position: -1600px -1760px;
	}
	100% {
		background-position: 0 0;
	}
}
@keyframes swim_min {
	0% {
		background-position: 0 0;
	}
	1.2987% {
		background-position: -100px 0;
	}
	2.5974% {
		background-position: -200px 0;
	}
	3.8961% {
		background-position: -300px 0;
	}
	5.1948% {
		background-position: -400px 0;
	}
	6.4935% {
		background-position: -500px 0;
	}
	7.7922% {
		background-position: -600px 0;
	}
	9.0909% {
		background-position: -700px 0;
	}
	10.3896% {
		background-position: -800px 0;
	}
	11.6883% {
		background-position: 0 -55px;
	}
	12.9870% {
		background-position: -100px -55px;
	}
	14.2857% {
		background-position: -200px -55px;
	}
	15.5844% {
		background-position: -300px -55px;
	}
	16.8831% {
		background-position: -400px -55px;
	}
	18.1818% {
		background-position: -500px -55px;
	}
	19.4805% {
		background-position: -600px -55px;
	}
	20.7792% {
		background-position: -700px -55px;
	}
	22.0779% {
		background-position: -800px -55px;
	}
	23.3766% {
		background-position: 0 -110px;
	}
	24.6753% {
		background-position: -100px -110px;
	}
	25.9740% {
		background-position: -200px -110px;
	}
	27.2727% {
		background-position: -300px -110px;
	}
	28.5714% {
		background-position: -400px -110px;
	}
	29.8701% {
		background-position: -500px -110px;
	}
	31.1688% {
		background-position: -600px -110px;
	}
	32.4675% {
		background-position: -700px -110px;
	}
	33.7662% {
		background-position: -800px -110px;
	}
	35.0649% {
		background-position: 0 -165px;
	}
	36.3636% {
		background-position: -100px -165px;
	}
	37.6623% {
		background-position: -200px -165px;
	}
	38.9610% {
		background-position: -300px -165px;
	}
	40.2597% {
		background-position: -400px -165px;
	}
	41.5584% {
		background-position: -500px -165px;
	}
	42.8571% {
		background-position: -600px -165px;
	}
	44.1558% {
		background-position: -700px -165px;
	}
	45.4545% {
		background-position: -800px -165px;
	}
	46.7532% {
		background-position: 0 -220px;
	}
	48.0519% {
		background-position: -100px -220px;
	}
	49.3506% {
		background-position: -200px -220px;
	}
	50.6493% {
		background-position: -300px -220px;
	}
	51.9480% {
		background-position: -400px -220px;
	}
	53.2467% {
		background-position: -500px -220px;
	}
	54.5454% {
		background-position: -600px -220px;
	}
	55.8441% {
		background-position: -700px -220px;
	}
	57.1428% {
		background-position: -800px -220px;
	}
	58.4415% {
		background-position: 0 -275px;
	}
	59.7402% {
		background-position: -100px -275px;
	}
	61.0389% {
		background-position: -200px -275px;
	}
	62.3376% {
		background-position: -300px -275px;
	}
	63.6363% {
		background-position: -400px -275px;
	}
	64.9350% {
		background-position: -500px -275px;
	}
	66.2337% {
		background-position: -600px -275px;
	}
	67.5324% {
		background-position: -700px -275px;
	}
	68.8311% {
		background-position: -800px -275px;
	}
	70.1298% {
		background-position: 0 -330px;
	}
	71.4285% {
		background-position: -100px -330px;
	}
	72.7272% {
		background-position: -200px -330px;
	}
	74.0259% {
		background-position: -300px -330px;
	}
	75.3246% {
		background-position: -400px -330px;
	}
	76.6233% {
		background-position: -500px -330px;
	}
	77.9220% {
		background-position: -600px -330px;
	}
	79.2207% {
		background-position: -700px -330px;
	}
	80.5194% {
		background-position: -800px -330px;
	}
	81.8181% {
		background-position: 0 -385px;
	}
	83.1168% {
		background-position: -100px -385px;
	}
	84.4155% {
		background-position: -200px -385px;
	}
	85.7142% {
		background-position: -300px -385px;
	}
	87.0129% {
		background-position: -400px -385px;
	}
	88.3116% {
		background-position: -500px -385px;
	}
	89.6103% {
		background-position: -600px -385px;
	}
	90.9090% {
		background-position: -700px -385px;
	}
	92.2077% {
		background-position: -800px -385px;
	}
	93.5064% {
		background-position: 0 -440px;
	}
	94.8051% {
		background-position: -100px -440px;
	}
	96.1038% {
		background-position: -200px -440px;
	}
	97.4025% {
		background-position: -300px -440px;
	}
	98.7013% {
		background-position: -400px -440px;
	}
	100% {
		background-position: 0 0;
	}
}

.activity_race .pass_charactor.end {
	left: 100%;
}

.activity_race .path_way .step_area {
	position: relative;
	height: 100%;
}

.activity_race .path_way.step2 .step_area {
	float: left;
	width: 50%;
}

.activity_race .path_way.step3 .step_area {
	float: left;
	width: 33.333%;
}

.activity_race .path_way.step4 .step_area {
	float: left;
	width: 25%;
}

.activity_race .path_way .step_area:after {
	content: '';
	position: absolute;
	right: -4px;
	top: 0px;
	z-index: 1;
	display: block;
	width: 5px;
	height: 495px;
	background: #72ccff;
}

/* .activity_race .path_way .step_area .passed {
    position: relative;
    width: 0;
    height: 356px;
    background: rgba(55, 183, 255, 0.3);
    position: absolute;
    left: 0;
    bottom: 0;
} */

.activity_race .path_way .step_area .act_box {
	position: absolute;
	left: 50%;
	margin-left: -165px;
	bottom: -64px;
	width: 333px;
	height: 126px;
	background: url('../img/toolsTimerAct.png') no-repeat center center;
	z-index: 12;
}

.activity_race .path_way .step_area .act_box .act_tit {
	padding: 10px 7px 10px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 65px;
	line-height: 47px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 30px;
	color: #fff;
	margin: 0 auto 0;
}

.activity_race .path_way .step_area .act_box .time {
	display: flex;
	align-items: center;
	justify-content: center;
}

.activity_race .path_way .step_area .act_box .time .mid {
	display: inline-block;
	height: 57px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 50px;
	color: #333;
	letter-spacing: 1px;
}

.activity_race .path_way .step_area .act_box .time .act_min,
.activity_race .path_way .step_area .act_box .time .act_sec {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 57px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 50px;
	color: #333;
	letter-spacing: -2px;
	border: 0;
}

.activity_race .path_way .step_area .act_box .del_btn {
	position: absolute;
	right: -18px;
	top: -15px;
	z-index: 2;
	width: 54px;
	height: 55px;
	color: transparent;
	overflow: hidden;
	background: url('../img/toolsTimerActDelete.png') no-repeat 50% 50%;
}

.activity_race .path_way .step_area .add_btn {
	position: absolute;
	left: 50%;
	margin-left: 188px;
	bottom: -23px;
	z-index: 2;
	width: 47px;
	height: 47px;
	color: transparent;
	overflow: hidden;
	background: url('../img/toolsTimerActPlus.png') no-repeat 50% 50%;
}

.guide_btn {
	position: absolute;
	right: 64px;
	top: 42px;
	width: 44px;
	height: 44px;
	font-size: 1px;
	color: transparent;
	overflow: hidden;
	background: url('../img/toolsTimerHelp.png') no-repeat 50% 50%;
	display: none;
}

.timer_guide_popup {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10000;
	width: 100%;
	height: 100%;
	background: url('../img/toolsTimerGuide.png') no-repeat 50% 50%;
}

.timer_guide_popup .close_btn {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 49px;
	height: 49px;
	font-size: 1px;
	color: transparent;
	overflow: hidden;
	background: url('../img/toolsPopClose2.png') no-repeat left top;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* stopwatch */
.stopwatch {
	background: #e4f3f2 url(../img/timer_bg_5.png) no-repeat left bottom !important;
}

/* sw_title_area */
.sw_title_area {
	height: 156px;
	width: 880px;
	text-align: center;
	position: absolute;
	top: 96px;
	left: 520px;
	z-index: 10;
}

.sw_title_area:after {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.sw_title_area .in {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	background: url('../img/toolsTimerTitleBg.png') no-repeat center center;
}

.sw_title_area input {
	width: 100%;
	height: 100%;
	border-radius: 36px;
	color: #333333;
	padding: 0 45px;
	font-family: 'NanumSquareRound';
	font-size: 48px;
	font-weight: 900;
}

.sw_title_area input::placeholder {
	color: #333333;
}

.sw_title_area input::-webkit-input-placeholder {
	color: #333333;
}

.sw_title_area input::-moz-placeholder {
	color: #333333;
}

.sw_title_area input:-ms-input-placeholder {
	color: #333333 !important;
}

.sw_title_area input::-ms-input-placeholder {
	color: #333333 !important;
}

.sw_page .timer_set_start1 {
	position: absolute;
	right: 50px;
	bottom: 32px;
}
.sw_page .timer_set_start1 button {
	width: 74px;
	height: 74px;
	background: url(../img/toolsTimerSizer.png) no-repeat center center;
	font-size: 0;
	vertical-align: middle;
}
.sw_title_area button {
	width: 154px;
	height: 84px;
	background: url('../img/toolsTimerSizer.png') no-repeat center center;
	font-size: 0;
	vertical-align: middle;
}

/* sw_watch_area */
.sw_watch_area {
	overflow: hidden;
}

.sw_watch_area .left {
	float: left;
	width: 1160px;
}

.sw_watch_frame {
	position: relative;
	position: absolute;
	top: 120px;
	left: -40px;
	overflow: hidden;
	height: 683px;
	width: 1099px;
	border-radius: 48px;
	color: rgba(0, 0, 0, 0.6);
	font-family: 'NanumGothic EB';
	font-size: 170px;
	text-align: center;
	background: url('../img/toolsTimerFrame2.png') no-repeat center center;
}

.sw_watch_frame .in {
	position: relative;
	z-index: 2;
	font-size: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 120px;
	width: 100%;
	padding-top: 284px;
}

.sw_watch_frame input {
	display: inline-block;
	width: 225px;
	height: 218px;
	color: #333333;
	font-family: 'NanumGothic EB';
	font-size: 190px;
	vertical-align: top;
	cursor: default;
}

.sw_watch_frame .dot {
	margin: 0 37px;
	font-size: 285px;
	vertical-align: top;
}

.timer_set_start2 {
	font-size: 0;
	text-align: center;
	position: absolute;
	right: 50px;
	top: auto;
	bottom: 32px;
	padding-left: 0;
	font-size: 0;
	width: auto;
}

.timer_set_start2 .start {
	width: 343px;
	height: 125px;
	margin-right: 50px;
	background: url('../img/toolsTimerStart.png') no-repeat center center;
}

.timer_set_start2 .start.stop {
	background: url('../img/toolsTimerStop.png') no-repeat center center;
}

.timer_set_start2 .record {
	width: 343px;
	height: 125px;
	margin-right: 50px;
	background: url('../img/toolsSwRecord.png') no-repeat center center;
}

.timer_set_start2 .reset {
	width: 230px;
	height: 126px;
	background: url('../img/toolsTimerReset.png') no-repeat center center;
}

.timer_set_start2 .sizer {
	display: none;
	width: 74px;
	height: 74px;
	background: url('../img/toolsTimerSizer.png') no-repeat center center;
}

.sw_watch_area .right {
	width: 928px;
	height: 645px;
	padding: 103px 99px 28px 42px;
	position: absolute;
	right: 40px;
	top: 270px;
	background: url('../img/toolsSwRecordBg.png') no-repeat center center;
}

.sw_watch_area .record_list {
	width: 596px !important;
	height: 415px !important;
	position: absolute;
	left: 121px;
	top: -10px;
}

.sw_watch_area .record_list li {
	display: table;
	width: 100%;
	height: 76px;
	background: url('../img/toolsSwborderBg.png') no-repeat left bottom;
	border-collapse: collapse;
	table-layout: fixed;
}

.sw_watch_area .record_list .num {
	display: table-cell;
	width: 72px;
	padding-left: 20px;
	color: #6c4833;
	font-size: 40px;
	font-weight: 900;
	font-family: 'NanumSquareRound';
	vertical-align: middle;
}

.sw_watch_area .record_list .record {
	display: table-cell;
	color: #333333;
	font-size: 45px;
	font-weight: 900;
	vertical-align: middle;
	font-weight: 900;
	font-family: 'NanumSquareRound';
	vertical-align: middle;
	padding-left: 30px;
}

.sw_watch_area .record_list .btn_cell {
	display: table-cell;
	width: 50px;
	text-align: center;
	vertical-align: middle;
}

.sw_watch_area .record_list button {
	width: 38px;
	height: 37px;
	background: url('../img/toolsSwRcdRemove.png') no-repeat center center;
	font-size: 0;
	position: relative;
	right: 20px;
}

.sw_watch_area .slimScrollDiv {
	overflow: visible !important;
	height: 410px !important;
}

.sw_watch_area .slimScrollBar {
	right: 8px !important;
	width: 10px !important;
	background-color: #d9d9d9 !important;
	opacity: 1 !important;
	box-shadow: 0 4px 8px rba(13, 53, 67, 0.55);
}

.sw_watch_area .slimScrollRail {
	right: 12px !important;
	width: 10px !important;
	background-color: transparent !important;
	opacity: 1 !important;
}
.sw_page .timer_set_start2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	right: auto;
	left: 202px;
	bottom: 171px;
}
.sw_page .timer_set_start2 .record,
.sw_page .timer_set_start2 .start {
	width: 248px;
	height: 101px;
	margin: 0;
	background: url(../img/toolsTimerStart.png) no-repeat center center;
}
.sw_page .timer_set_start2 .start.stop {
	background: url(../img/toolsTimerStop.png) no-repeat center center;
}
.sw_page .timer_set_start2 .record {
	background: url(../img/toolsSwRecord.png) no-repeat center center;
}
.sw_page .timer_set_start2 .reset {
	margin: 0;
	width: 74px;
	height: 74px;
	background: url(../img/toolsTimerReset.png) no-repeat center center;
}
/* tooltip */
.tooltip.message {
	position: absolute;
	left: -10px;
	bottom: -91px;
	width: 365px;
	height: 108px;
	padding: 14px 14px 0px 26px;
	background: url(../img/timer_input_bg.png) no-repeat;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 28px;
	color: #333;
	z-index: 100;
}
#timerSetPopup {
}
#timerSetPopup .inner_box {
	background: rgba(62, 62, 62, 0.9);
	height: 164px;
	width: 1332px;
	border-radius: 50px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
}
#timerSetPopup p {
	color: #ffffff;
	font-size: 50px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
}
.tooltip.message.hide {
	display: none;
}