/*
 * clock.css
 */

/*https://www.1001fonts.com/digital-dismay-font.html*/
@font-face {
    font-family: 'Digital Dismay';
    src: url('Digital Dismay.otf');
    font-weight: normal;
    font-style: normal;
}
.digitalClock{
	font-family: 'Digital Dismay';
	font-size: 290px;
	color:gray;
}

#laplist{
	position:absolute;
	top: 750px;
	border:0px solid red;
	text-align: center;
	width: 700px;
	height: 350px;
	overflow-y: scroll;
}

.laplist{
	font-family: 'Digital Dismay';
	font-size: 60px;
	color:white
}

.clock_pop { position:absolute; width:100%; height:100%;70%; stop:0;12%; spadding-top: 10%; z-index:1002; sbackground-color: rgba(0,0,0,0.2); display:none; }
.clock_pop article { margin:0 auto; width:100%;50%; height:100%; cursor:pointer; 
width: 1920px !important;height: 1080px !important;}
.clock_pop article img { position:absolute; width:50%; smargin-top:-5%; top: 10%; left: 25%; }
.clock_pop article span img { position:relative; width:100%; margin-top: -5%; margin-left:-50%;}

.clock_pop article{position:absolute; top: 50%;}
.clock_pop article img{top: 0;}
/*화면중앙으로 위치 조정*/
.clock_pop article{top: 50%; transform:translateY(-50%);}

.clock_pop article{ top: 50%;left:50%;transform:translate(-50%,-50%);background-color: rgba(0,0,0,0.5);}


#clock_btn_area { position:absolute; margin-top:0;-3%;-5%; width:50%; transform: translateX(-50%); left: 50%;}
#clock_btn_1 { margin:10.5% 0 0 67.5%; display:table;  }
#clock_btn_2 { margin:26% 0 0 83.5%; display:table; }
#clock_btn_3 { margin:47% 0 0 89%; display:table; }
#clock_btn_4 { margin:68.5% 0 0 83.5%; display:table; }
#clock_btn_5 { margin:83.5% 0 0 67%; display:table; }
#clock_btn_6 { margin:88.5% 0 0 46.5%; display:table; }
#clock_btn_7 { margin:83.5% 0 0 26%; display:table; }
#clock_btn_8 { margin:67.5% 0 0 10%; display:table; }
#clock_btn_9 { margin:46.5% 0 0 4.5%; display:table; }
#clock_btn_10 { margin:26% 0 0 10%; display:table; }
#clock_btn_11 { margin:10.5% 0 0 26%; display:table; }
#clock_btn_12 { margin:5% 0 0 46.5%; display:table; }

/*5분단위 버튼*/
#clock_btn_area > div:not(.clock_btn_close) {background-color:rgba(0,0,0,0);}

.clock_btn_default { position:absolute; z-index:1004; width:7%; height:7%; text-align:center; border-radius:50px; }
.clock_btn_default span { display:table-cell; vertical-align:middle; display:none; }
.clock_btn_close { position:absolute; width:100%; height:100%; z-index:1003; cursor:pointer; }

.alert_area { position:fixed; width:100%; top:50%;35%; z-index:10001;transform: translateY(-50%);}
.alert_area article { margin:0 auto; padding:20px; width:20%; text-align:center; background:#fff; border-radius:8px; border:3px solid #ccc; font-size:1.7em; box-shadow:3px 3px 3px #333; }
.alert_area article input { margin-top:15px; border:0; background:#ff6600; padding:5px 10px; color:#fff; border-radius:5px; font-size:0.9em; }
.alert_bg { position: fixed; z-index:10000; width:100%; height:100%; top:0px; background:#000; opacity:0.6; }

#concentration_pop { position:fixed; width:100%; height:100%; top:0;25%; z-index:1001; display:none;background-color: rgba(255,0,0,0.1); }	
#concentration_pop article { margin:15% auto; width:30%; height:75%; text-align:center; }
#concentration_pop article img { width:80%; margin-top:-5%; cursor:pointer; }	

.rotate1 { transform:rotate(-10deg); }
.rotate2 { transform:rotate(0deg); }
.rotate3 { transform:rotate(10deg); }
.rotate4 { transform:rotate(0deg); }

#menu_cms{margin-top: 5px !important;}
#menu_clock{margin-top: 10px;}


/*타이머/스톱워치 추가*/
/*
.clock_btn_close{top:0;}

.container span,
.container button{z-index: 10001;}
*/

.clock_selector{
	position: absolute;
	bottom: 0%;
	width: 100px; height: 100px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-image:url(https://cdn0.iconfinder.com/data/icons/interface-10/128/_Hourglass-512.png);
}
.clock_selector::before{
	content: '시계';
	position: absolute;
	bottom:0;left: 0;width: 100%;height: 100%;
	text-align: center;
	font-size: 30px;
}

.clock_selector[data-clock='close']{right:130px; top:160px;background-image: url(../img/padview/icon_exit_on.png);}
.clock_selector[data-clock='clock']{right:130px; top:360px;background-image: url(../img/icon_clock_clock_off.png);}
.clock_selector[data-clock='timer']{right:130px; top:500px;background-image: url(../img/icon_clock_timer_off.png);}
.clock_selector[data-clock='stop']{right:130px; top:640px;background-image: url(../img/icon_clock_stop_off.png);}

.clock_selector[data-clock='close']:active{transform: translateY(7px);}

.clock_selector::before{
	content: '시계';
	position: absolute;
	top:0;left: 0;width: 100%;height: 130%;
	text-align: center;
	font-size: 20px;
	line-height:230px;
	color: white;
	font-family: Jua;	
}
.clock_selector.on[data-clock='clock']{background-image: url(../img/icon_clock_clock_on.png) !important;}
.clock_selector.on[data-clock='timer']{background-image: url(../img/icon_clock_timer_on.png) !important;}
.clock_selector.on[data-clock='stop']{background-image: url(../img/icon_clock_stop_on.png) !important;}

.clock_selector.on::before{color: black !important;}

.clock_selector[data-clock='close']::before{content:''}
.clock_selector[data-clock='clock']::before{content:'시계'}
.clock_selector[data-clock='timer']::before{content:'타이머'}
.clock_selector[data-clock='stop']::before{content:'스톱워치'}


.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1920px;100%;
    height: 1080px;
    sbackground-color: rgba(0,0,0,0.5);
}

.digit {
    font-size: 150px;
    color: #fff;
	font-family: 'Digital Dismay';
	color:black;
}
.digit#count{color:gray;}

.txt {
    font-size: 30px;
    color: #fffcd6;
}

.digit_buttons {
    margin-top: 50px;
}

.digit_buttons .btn {
    width: 100px;
    padding: 10px 15px;
    margin: 0px 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    transition: 0.5s;
    color: white;
    font-weight: 500;
	white-space: nowrap;
}

.btn:disabled{
	pointer-events: none;
	background-color: lightgray !important;
}

#timer_startStop,
#stop_startStop {
    background-color: #009779;
}
#timer_reset,
#stop_lapReset {
    background-color: #c91400;
}
#timer_set {
	width: 150px;
    background-color: #0e85fc;
}
#stop_lapReset.lap{
    background-color: #0e85fc;
}

#digit_stop{
	background-color:skyblue;
	padding: 20px 60px;
	border-radius: 30px;
}

#timer_close,
#stop_close{
    background-color: #333;
}

#digit_timer{
	background-color:gold;
	padding: 20px 60px;
	border-radius: 30px;
}

#digit_timer .digit{
	font-size: 200px;
}
#digit_timer .digit.blink{
	font-size: 200px;
	animation: blink-effect 1s step-end infinite;
}
@keyframes blink-effect {
  50% {
    opacity: 0.5;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;
}