@charset "utf-8";
/** common css **/
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

.kioskbg { position:relative; height:81px; background:#4d5154 url('/fromkiosk/img/tbg.gif') repeat-x; padding:45px 50px 95px 50px; margin-top:40px; }
.kioskbg:before { position:absolute; bottom:0; right:0; background:url('/fromkiosk/img/tit_bg.png') no-repeat right bottom; content:""; width:386px; height:235px; }
.kioskbg h4.tit { font-size:40px !important; font-family: 'Noto Sans KR', sans-serif !important; font-weight:500; color:#D85E15 !important; letter-spacing:-0.1em; line-height:100% !important; }

/* .kioskbg h4.tit { font-size:40px !important; font-family: 'Noto Sans KR', sans-serif !important; font-weight:500; color:#f3692c !important; letter-spacing:-0.1em; line-height:100% !important; } */

#cardBox { position:relative; padding-top:20px; width:100%; text-align:center; } 
#cardBox:before { position:absolute; top:-72px; left:5px; background:url('/fromkiosk/img/con_tbg.png') no-repeat left top; content:""; width:200px; height:94px; } 
#cardBox #card>ul { overflow:hidden; }
#cardBox #card>ul>li { position:relative; display:inline-block; margin-left:1.3%; width:32%; height:230px; }
#cardBox #card>ul>li:first-child { margin-left:0; }
#cardBox #card>ul>li div { position:absolute; width:100%; height:224px; }
#cardBox #card>ul>li div.off { display:block; background-repeat:no-repeat; /* opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out; transition:all 0.35s ease-in-out; -webkit-transform:translateZ(0) rotateY(0); -moz-transform:translateZ(0) rotateY(0); -ms-transform:translateZ(0) rotateY(0); -o-transform:translateZ(0) rotateY(0); transform:translateZ(0) rotateY(0);  */}

/*#cardBox #card li div.off { background-position:center top; background-repeat:no-repeat; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out; transition:all 0.35s ease-in-out; opacity:1; transform:translateZ(0) rotateY(0); -webkit-transform:translateZ(0) rotateY(0); -moz-transform:translateZ(0) rotateY(0); -ms-transform:translateZ(0) rotateY(0); -o-transform:translateZ(0) rotateY(0);}
/*#cardBox #card li div.off { background-position:center top; background-repeat:no-repeat; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out; transition:all 0.35s ease-in-out; }*/

#cardBox #card li.card01 div.off { background-image:url('/fromkiosk/img/con_bg01.jpg'); }
#cardBox #card li.card02 div.off { background-image:url('/fromkiosk/img/con_bg02.jpg'); }
#cardBox #card li.card03 div.off { background-image:url('/fromkiosk/img/con_bg03.jpg'); }
#cardBox #card li.card04 div.off { background-image:url('/fromkiosk/img/con_bg04.jpg'); }
#cardBox #card li.card05 div.off { background-image:url('/fromkiosk/img/con_bg05.jpg'); }
#cardBox #card li div p.tit { padding-top:40px; border-radius:10px 10px 0px 0px; font-size:24px; text-align:center; font-weight:400; }
#cardBox #card li div.off p.tit, #cardBox #card li div.off p.tit a { padding-top:133px; height:65px; font-size:30px; color:#ffc83e; font-weight:500; line-height:28px; background:no-repeat center 50px; }
#cardBox #card li.card01 div.off p { background-image:url('/fromkiosk/img/con_ic01.png') }
#cardBox #card li.card02 div.off p { background-image:url('/fromkiosk/img/con_ic02.png') }
#cardBox #card li.card03 div.off p { background-image:url('/fromkiosk/img/con_ic03.png') }
#cardBox #card li.card04 div.off p { background-image:url('/fromkiosk/img/con_ic04.png') }
#cardBox #card li.card05 div.off p { background-image:url('/fromkiosk/img/con_ic05.png') }
#cardBox #card li p, #cardBox #card li { font-family: 'Noto Sans KR', sans-serif !important; font-weight:400; color:#fff; }
/* #cardBox #card li div.off p.tit { font-size:30px; color:#ffc83e; font-weight:500; } */
#cardBox #card li div.on { display:none; position:relative; background:#d4683f; text-align:left; /* opacity:0; visibility:hidden;-webkit-transition:all 0.35s ease 0.35s; -moz-transition:all 0.35s ease 0.35s; transition:all 0.35s ease 0.35s; -webkit-transform:translateZ(-1000px) rotateY(-90deg); -moz-transform:translateZ(-1000px) rotateY(-90deg); -ms-transform:translateZ(-1000px) rotateY(-90deg); -o-transform:translateZ(-1000px) rotateY(-90deg); transform:translateZ(-1000px) rotateY(-90deg); */}
#cardBox #card li div.on.con { display:block;}

/*#cardBox #card li div.on { background:#d4683f; text-align:left; opacity:0; visibility:hidden; -webkit-transition:all 0.35s ease 0.35s; -moz-transition:all 0.35s ease 0.35s; transition:all 0.35s ease 0.35s; -webkit-transform:translateZ(-1000px) rotateY(-90deg); -moz-transform:translateZ(-1000px) rotateY(-90deg); -ms-transform:translateZ(-1000px) rotateY(-90deg); -o-transform:translateZ(-1000px) rotateY(-90deg); transform:translateZ(-1000px) rotateY(-90deg);}
/* #cardBox #card li div.on { background:#d4683f; text-align:left; -webkit-transition:all 0.35s ease 0.35s; -moz-transition:all 0.35s ease 0.35s; transition:all 0.35s ease 0.35s;} */

#cardBox #card li div.on span.flag { position:absolute; right:0; top:0; color:#fff; font-weight:600; text-align:center; padding:7px 15px; }
#cardBox #card li div.on span.smooth { background:#2783d1; }
#cardBox #card li div.on span.delay { background:#e63737; }
#cardBox #card li div.on span.end { background:#474747; }
#cardBox #card li div.on .minwonBox { padding:20px 25px; }
#cardBox #card li div.on .minwonBox p.tit { text-align:left; padding:15px 0; font-size:24px; line-height:100%; }
#cardBox #card li div.on .minwonBox .num span { margin-left:15px; padding:4px 15px; background:#aa3e16; font-weight:600; border-radius:32px; }
#cardBox #card li div.on .minwonBox ul li { overflow:hidden; }
#cardBox #card li div.on .minwonBox .ts_f { float:left; font-size:20px; margin-top:25px; padding-right:30px; }
#cardBox #card li div.on .minwonBox .tnum_f { float:left; text-align:right; width:45%; font-size:65px; margin-top:-20px; font-family:'Nanum Gothic','나눔고딕', sans-serif !important; font-weight:600; letter-spacing:-3px; }
#cardBox #card li div.on .minwonBox .count { margin-left:15%; font-size:16px; }
#cardBox #card li div.on .minwonBox .count span { display:inline-block; font-size:24px; width:20%; text-align:right; margin-right:3px; font-weight:600; }

/* CARD hover effect 
#cardBox #card li:hover div.off { opacity:1; -webkit-transform:translateZ(-1000px) rotateY(90deg); -moz-transform:translateZ(-1000px) rotateY(90deg); -ms-transform:translateZ(-1000px) rotateY(90deg); -o-transform:translateZ(-1000px) rotateY(90deg); transform:translateZ(-1000px) rotateY(90deg); }
#cardBox #card li:hover div.on.con { visibility:visible; opacity:1; -webkit-transform:rotateY(0deg); -webkit-transform:translateZ(0) rotateY(0); -moz-transform:translateZ(0) rotateY(0); -ms-transform:translateZ(0) rotateY(0); -o-transform:translateZ(0) rotateY(0); transform:translateZ(0) rotateY(0); }*/

p.re_set a { position:absolute; left:250px; top:186px; background:url('/fromkiosk/img/ic_reset.png') no-repeat; color:#fff; font-weight:600; text-align:center; width:27px; height:24px; font-size:0; text-indent:5000px; margin:0; padding:0; overflow:hidden; padding:3px; }
/***********************************************************************************************************************************************/

@media screen and (max-width:1024px) {
	.kioskbg { margin-top:0; padding-bottom:200px; }
	.kioskbg:before { background-size:80%; }
	.titBox { text-align:center; margin-top:0; padding-bottom:40px; }
	#cardBox { padding:20px 0; height:auto; }
	#cardBox>div.wrapper, #popupzone>div, #notice>.wrapper { padding:0 20px; }
	#cardBox #card>ul>li { width:49.5%; margin:0 0 1% 1%; }
	#cardBox #card>ul>li:nth-child(even) { float:right; }
	#cardBox #card>ul>li:nth-child(odd) { margin-left:0px; }
	#cardBox #card li div.on>ul>li>p { font-size:15px; }
	#cardBox #card li.card01 div.off, #cardBox #card li.card02 div.off, #cardBox #card li.card03 div.off, #cardBox #card li.card04 div.off, #cardBox #card li.card05 div.off { background-size:110%; }

	p.re_set a { left:270px; top:186px; }
}

@media screen and (min-width:769px) {
	
}


@media screen and (max-width:767px) {
	.kioskbg { overflow:hidden; padding-left:15px; padding-right:35px; background-image:url('/fromkiosk/img/tbg_m.gif'); }	
	.kioskbg:before { background-image:url('/fromkiosk/img/tit_bg_m.png'); width:696px; }
	.titBox { width:95%; }
	.titBox h4.tit { font-size:30px !important; }
	#cardBox { padding:15px 0; }
	#cardBox:before { background:none !important; }
	#cardBox #card li div.off p.tit { padding-top:120px; height:65px; line-height:28px; background-position:center 40px; }
	#cardBox #card li.card01 div.off, #cardBox #card li.card02 div.off, #cardBox #card li.card03 div.off, #cardBox #card li.card04 div.off, #cardBox #card li.card05 div.off { background-size:100% 260px; }
	#cardBox #card li div p.tit { font-size:22px; }
	#cardBox #card li div.off { }
	#cardBox #card li div.off p.sub { font-size:14px; }
	#cardBox #card li div.on>ul { display:none; }

	p.re_set a { left:87%; top:85%; }
}

@media screen and (max-width:620px) {
	#cardBox #card li div.off p.tit { padding-top:130px; background-position:center 50px; }

	
}

@media screen and (max-width:480px) {
	.kioskbg { padding-right:0; padding-top:30px; padding-bottom:43%; }
	.kioskbg:before { width:450px; background-size:90%; }
	#cardBox #card>ul>li { margin:0 0 2% 1%; }
	#cardBox #card>ul>li, #cardBox #card>ul>li div { overflow:hidden; width:100%; height:260px; }
	#cardBox #card li.card01 div.off,
	#cardBox #card li.card02 div.off,
	#cardBox #card li.card03 div.off,
	#cardBox #card li.card04 div.off,
	#cardBox #card li.card05 div.off { background-size:100%; }
	#cardBox #card div p.tit { height:55px !important; line-height:23px !important; }
	#cardBox #card li div.off p.tit { padding-top:150px }
	#cardBox #card li div.on, #cardBox #card li div.on .minwonBox p.tit { padding:15px 0; text-align:center; }
	#cardBox #card li div.on .minwonBox { padding:10px 0; }
	#cardBox #card li div.on .minwonBox ul { margin-top:-20px; }
	#cardBox #card li div.on .minwonBox .ts_f { float:none; padding-right:0; margin-top:0; }
	#cardBox #card li div.on .minwonBox .tnum_f { float:none; width:100%; text-align:center; }
	#cardBox #card li div.on .minwonBox .count { margin-top:-15px; margin-left:0; }

	p.re_set a { top:75%; }

}

@media screen and (max-width:380px) {
	.kioskbg { padding-bottom:63%; }
	.kioskbg:before { background-size:80%; }	
	#cardBox #card li div.off p.tit { padding-top:170px; background-position:center 80px; }
	#cardBox #card>ul>li, #cardBox #card>ul>li div, #cardBox #card li.card01 div.off, #cardBox #card li.card02 div.off, #cardBox #card li.card03 div.off, #cardBox #card li.card04 div.off, #cardBox #card li.card05 div.off { background-size:120%; }

}