:root{
	--color-white:#fff;
}
main.wrap{
	position:relative;
	width:100%;
	background:#C8C8D3;
}
/* 메인 영역 */
.main-area {
	position:relative;
	padding: 12px 20px 68px;
	padding: 1.2rem 2rem 6.8rem;
	width:100%;
	height:auto;
	box-sizing:border-box;
	font-size:18px;
	font-size:1.8rem
}
.main-area.on {
	height:100vh;
}
.main-area .logo {
	height:46px;
	height:4.6rem;
	text-align:center;
}
.main-area .logo img {
	width:80%;
	max-width:200px;
	max-width:20rem;
}
.main-area h2{
	margin-top:36px;
	margin-top:3.6rem;
	font-size:24px;
	font-size: 2.4rem;
	font-weight:600;
}
.main-area .ico-pan {
	display:inline-block;
	width: 24px;
	width: 2.4rem;
	height: 24px;
	height: 2.4rem;
	background:url(../img/ico_pan.png) no-repeat center center/100%;
}
.main-area [class^="wrap-meat"] {
	--column-width:12rem;
	display:grid;
	margin-top: 18px;
	margin-top: 1.8rem;
	grid-template-columns:repeat(auto-fit, minmax(var(--column-width), 1fr));
	gap:0.8rem;
}
.main-area [class^="wrap-meat"] label {
	display: block;
	position:relative;
}
[class^="wrap-meat"] input {
	overflow:hidden;
	position:absolute;
	width:1px;
	height:1px;
	font-size:1px;
	line-height:0;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	margin:-1px;
	padding:0;
	border:0;
}
[class^="wrap-meat"] label > span {
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 12px 20px; 
	padding: 1.2rem 2rem;
	border:1px solid #e6ecf3;
	border-radius: 8px;
	border-radius: 0.8rem;
	height: 50px;
	height: 5rem;
	color:#333;
	font-weight: 600;
	background-color:#e6ecf3;
	transition:all .3s;
}

html:lang(en) [class^="wrap-meat"] label > span,
html:lang(ja) [class^="wrap-meat"] label > span {
	flex-direction:column;
	padding: 12px 0; 
	padding: 1.2rem 0;
	height:auto;
	gap:4px;
	gap:.4rem;
}
html:lang(en) [class^="wrap-meat"] span b,
html:lang(ja) [class^="wrap-meat"] span b {
	font-size:16px;
	font-size:1.6rem;
}
html:lang(en) [class^="wrap-meat"] span i,
html:lang(ja) [class^="wrap-meat"] span i {
	font-size:1.2rem;
}
[class^="wrap-meat"] input[type=radio]:checked + span {
	border-color:#2d4902;
	background-color:#2d4902;
	color:var(--color-white);
}
.btn-start {
	display:block;
	position:fixed;
	bottom:0;
	left:0;
	z-index:1;
	width:100%;
	padding:24px 0;
	padding:2.4rem 0;
	color:var(--color-white);
	font-weight:600;
	font-size: 20px;
	font-size: 2rem;
	line-height:1;
	background-color:#698d01;
}
html:lang(ko) .btn-start {
	letter-spacing:10px;
	letter-spacing:1rem;
}
/* 타이머 */
.timer-area {
	position:relative;
	overflow:hidden;
}
.timer-area.on {
	overflow:visible;
}
.timer-area .timer-wrap{
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	position:absolute;
	bottom:0;
	z-index:10;
	width:100%;
	height:100vh;
	opacity:0;
	transform:translateY(100vh);
	transition:all 0.5s;
}
.timer-area.on .timer-wrap {
	opacity:1;
	transition:all 0.5s;
	transform:translateY(0);
	background:#C8C8D3;
}
.timer-area .timer-wrap > p {
	margin:20px 0;
	margin:2rem 0;
	text-align:center;
	font-size: 72px;
	font-size: 7.2rem;
	font-family:"Nanum Gothic";
}
.timer-area .wrap-visual {
	position:relative;
	width:100%;
	height:100px;
	height:10rem;
}
.timer-area .wrap-visual .wrap-vapour {
	position:relative;
	display:flex;
	z-index:1;
	padding:0 10px;
	padding:0 1rem;
	width:145px;
	width:14.5rem;
	margin:0 auto;
}
.timer-area .wrap-visual .wrap-vapour span {
	position:relative;
	bottom:25px;
	bottom:2.5rem;
	display:block;
	margin:0 1px 25px;
	margin:0 .1rem 2.5rem;
	min-width:6px;
	min-width:.4rem;
	height:60px;
	height:6rem;
	background:#fff;
	border-radius:50%;
	filter:blur(4px);
	
	opacity:0;
}
.timer-area .wrap-visual.on .wrap-vapour span {
	animation:animate-vapour 5s linear infinite;
	animation-delay:calc(var(--i) * 0.5s);
}

.timer-area .wrap-visual i {
	position:absolute;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	translate:all 0.5s;
}
.timer-area .wrap-visual .ico-pan-handle {
	top:18px;
	top:1.8rem;
	left:calc(50% + 5.9rem);
	width:54px;
	width:5.4rem;
	height:25px;
	height:2.5rem;
	background-image:url(../img/ico_pan_handle.png);
	transform-origin: left;
	transform:rotate(-12deg);
}
.timer-area .wrap-visual .ico-pan-body {
	top:50%;
	left:50%;
	width:145px;
	width:14.5rem;
	height:52px;
	height:5.2rem;
	background-image:url(../img/ico_pan_body.png);
	transform:translate(-50%, -50%) rotate(6deg);
}
.timer-area .wrap-visual.on .ico-pan-handle {
	animation:2s ease infinite animation-pan-handle;
}
.timer-area .wrap-visual.on .ico-pan-body {
	animation:2s ease infinite animation-pan-body;
}
.timer-area .wrap-visual.complete {
	height:306px;
	height:30.6rem;
	margin-bottom:20px;
	margin-bottom:2rem;
	background:url(../img/img_complete.jpg) no-repeat center center;
	background-size:306px;
	background-size:30.6rem;
}
.timer-area .wrap-visual.complete .wrap-vapour,
.timer-area .wrap-visual.complete .ico-pan-handle,
.timer-area .wrap-visual.complete .ico-pan-body,
.timer-area .wrap-visual.complete + p {
	display:none;	
}
.timer-area  .timer-wrap > .time-button-area {
	display:flex;
	flex-wrap:wrap;
	/* justify-content:space-between; */
	gap:1.2rem;
	margin-top:18px;
	margin-top:1.8rem;
	width:80%;
	margin:0 auto;
}
.timer-area .wrap_gauge {
	position:relative;
	margin:12px auto 60px;
	margin:1.2rem auto 6rem;
	width:80%;
	height:10px;
	height:1rem;
	background:#ddd;
	border-radius:5rem;
}
.timer-area .bar_gauge {
	position:absolute;
	top:50%;
	left:0;
	height:1rem;
	border-radius:5rem;
	background-color:#aad775;
	transform: translateY(-50%);
	transition: right .1s;
}
.timer-area .bar_gauge:after{
	content:"";
	position:absolute;
	top:50%;
	right:-12px;
	right:-1.2rem;
	width:24px;
	width:2.4rem;
	height:24px;
	height:2.4rem;
	border-radius:50%;
	background:#698d01 url(../img/ico_tongs.png) no-repeat center center;
	background-size: 18px;
	background-size: 1.8rem;
	transform:translateY(-50%);
}
.timer-area .ico_flip {
	display:block;
	position:absolute;
	top:-20px;
	top:-2rem;
	width:20px;
	width:2rem;
	height:20px;
	height:2rem;
	background:url(../img/ico_flipping.png) no-repeat center center;
	background-size:20px 20px;
	background-size:2rem 2rem;
}
.timer-area .time-button-area .ggwc_btn {
	display:block;
	position:relative;
	padding:18px 22px;
	padding:1.8rem 2.2rem;
	border:1px solid #cfcfcf;
	border-radius:36px;
	border-radius:3.6rem;
	width:100%;
	background-color:#e6ecf3;
	color:#666;
	font-size:18px;
	font-size:1.8rem;
	text-align:center;
}
.timer-area .time-button-area .ggwc_btn.play {
	border-color:#698d01;
	background-color: #698d01;
	font-weight:600;
	color:var(--color-white);
}
.timer-area .time-button-area .ggwc_btn.stop {
	border-color:#e4892e;
	background-color: #e4892e;
	font-weight:600;
	color:#fff;
}
.timer-area .time-button-area .ggwc_btn.reset,
.timer-area .time-button-area .ggwc_btn.close{
	width:calc(50% - 0.6rem);
}
/* 소고기 굽기정도 비표시 */
.wrap-beef-roasting-type{
	display: none;
	margin-top: 24px;
	margin-top: 2.4rem;
}
.wrap-beef-roasting-type h3 {
	display:flex;
	align-items:center;
	font-weight:600;
}
.wrap-beef-roasting-type .ico-level {
	display:inline-block;
	margin-left:.8rem;
	width: 20px;
	width: 2rem;
	height: 2px;
	height: 2rem;
	background:url(../img/ico_level.png) no-repeat center center/100%;
}
.wrap-meat-roasting label > span {
	border-radius:30px;
	border-radius:3rem;
}
.wrap-meat-roasting input[type=radio]:checked + span {
	color:#698d01;
	border-width:0.2rem;
	border-color:#698d01;
	background:#e6ecf3;
}
/* 임시 닫기 버튼 */
.btn-close {
	display:block;
	position:absolute;
	top: 20px;
	top: 2rem;
	right: 20px;
	right: 2rem;
	width:50px;
	width:5rem;
	height:50px;
	height:5rem;
}
.btn-close:before,
.btn-close:after {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:10%;
	width:80%;
	height:2px;
	height:0.2rem;
	background-color:#666;
	transform-origin: center;
}
.btn-close:before {
	transform:rotate(45deg);
}
.btn-close:after {
	transform:rotate(-45deg);
}

/* 레이어 팝업 */
#modal {
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	position:absolute;
	top:0;
	z-index:-1;
	width:100%;
	height:100vh;
	opacity:0;
	transition:all 0.5s;
}
#modal.on {
	bottom:0;
	opacity:1;
	z-index:20;
	transition:all 0.5s;
	background:rgba(0, 0, 0, 0.7);
}
#modal.stop{
	background:rgba(200, 50, 50, 0.5);
}
#modal.stop .modal-cont {
	opacity:0;
	animation:1.5s ease .3s infinite blink;
}
#modal .modal-cont {
    display: block;
    padding: 2.5rem;
    width: 80%;
	border-radius: 1.6rem;
    background-color:#e6ecf3;
	font-size: 1.6rem;
	text-align: center;
	line-height:24px;
	line-height:2.4rem;
}
#modal.confirm .modal-cont {
	padding: 2.5rem 2.5rem 1.5rem;
}
#modal .wrap-modal-button-list{
	display: none;
	margin-top: 20px;
	margin-top: 2rem;
}
#modal.confirm .wrap-modal-button-list{
	display: flex;
	align-items:center;
	justify-content: center;
}
#modal .wrap-modal-button-list button{
	display:block;
	flex:1;
	border:1px solid #666;
	padding: 8px 12px;
	padding: 0.8rem 1.2rem;
	border-radius: 8px;
	border-radius: .8rem;
	color:#666;
	background-color:#fff;
}
#modal .wrap-modal-button-list button + button {
	margin-left: 8px;
	margin-left: .8rem;
}
#modal .wrap-modal-button-list #modal-cancel {
	border-color:#698d01;
	color:#698d01;
}


/* 언어선택 */
.wrap_language {
	text-align:right;
	margin:0 -10px 10px;
	margin:0 -1rem 1rem;
}
.wrap_language select {
    background-color: transparent;
    border: none;
    font-size: 14px;
    font-size: 1.4rem;
    color: #666;
}
html:lang(ko) .wrap_language select {
	font-weight:600;
}
.wrap_language select:focus {
    outline: 0;
    border: none;
}


@keyframes blink {
	0% {opacity:0}
	50% {opacity:1}
	100% {opacity:0}
}
@keyframes animate-vapour {
	0% {transform:translateY(0) scaleX(1);opacity:0;}
	15% {opacity:1;}
	50% {transform:translateY(-7.5rem) scaleX(5);}
	95% {opacity:0;}
	100% {transform:translateY(-15rem) scaleX(10);}
}
@keyframes animation-pan-handle {
	0% {transform:rotate(-6deg)}
	50% {transform:rotate(6deg)}
	100% {transform:rotate(-6deg)}
}
@keyframes animation-pan-body {
	0% {transform:translate(-50%, -50%) rotate(6deg)}
	50% {transform:translate(-50%, -50%) rotate(-6deg)}
	100% {transform:translate(-50%, -50%) rotate(6deg)}
}