@charset "utf-8";

#roulette{ position: relative; overflow: hidden; width:800px; max-width:80%; margin:0 auto; z-index:1}
#roulette #gameContainer{position: relative;}
#roulette #gameContainer h1{}
#roulette #gameContainer .obj{}
#roulette #gameContainer .board_start{position:absolute; left:40%; top:36%; width:20%; height:24%; background:url(https://cdn.skecherskorea.co.kr/sub_promotion/roulette_start.png) no-repeat; background-size:cover; z-index:1; cursor:pointer;}
#roulette #gameContainer .board_start img{width:100%;}
#roulette #gameContainer .board_bg{height:0; padding-bottom:100%}
#roulette #gameContainer .board_bg img{width:100%;}
#roulette #gameContainer .board_on{height:0; padding-bottom:100%; background-image: url(https://cdn.skecherskorea.co.kr/sub_promotion/roulette_circle_bg.png); background-size: cover; background-repeat:no-repeat}
#roulette #gameContainer .board_on img{position:absolute; width:30%; height:30%}
#roulette #gameContainer .board_on img:nth-child(1){ left: 34%; top:8%; transform: rotate( -1deg )}
#roulette #gameContainer .board_on img:nth-child(2){ left: 12%; top:21%; transform: rotate( -59deg )}
#roulette #gameContainer .board_on img:nth-child(3){ left: 9%; top:45%; transform: rotate( -111deg )}
#roulette #gameContainer .board_on img:nth-child(4){ left: 25%; top:62%; transform: rotate( -158deg )}
#roulette #gameContainer .board_on img:nth-child(5){ left: 47%; top:60%; transform: rotate( -204deg )}
#roulette #gameContainer .board_on img:nth-child(6){ left: 62%; top:42%; transform: rotate( -255deg )}
#roulette #gameContainer .board_on img:nth-child(7){ left: 57%; top:18%; transform: rotate( -306deg )}

#roulette #gameContainer .obj.board_arrow{width:90px; height:105px; top:0px; left:195px; z-index: 5;}
#roulette #gameContainer .char1{width:259px; height:246px; top:400px; left:90px; z-index: 1;}
#roulette #gameContainer .char2{width:175px; height:198px; top:449px; left:600px; z-index: 1;}
#roulette #gameContainer .char3{width:112px; height:108px; top:540px; left:550px; z-index: 3;}
#roulette #gameContainer .txt1{width:420px; height:30px; bottom:20px; left:260px; z-index: 3;}

#popup_gift{position: fixed; left: 0; top:0; width:100%; height:100%; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); opacity:0; visibility:hidden}
#popup_gift .obj{ width:500px; max-width:90%; opacity:0; transform:translateY(5em); transition:.3s; background:#fff; border-radius:1em; box-shadow:0 0 5px 2px rgba(0,0,0,.5); overflow:hidden}
#popup_gift .obj .wrap_in{ text-align:center}
#popup_gift .lottery_present .ment{ border-bottom:2px dashed #bbb; padding:1.5em 0}
#popup_gift .lottery_present .ment .t1{ font-size:2em; font-weight:700}
#popup_gift .lottery_present .ment .t2{ color:#666; margin-top:.5em; font-size:1.125em}
#popup_gift .lottery_present .ment .t2 .point{ display:inline-block; padding:.5em 1.5em; background:#333; color:#fff; margin-right:.25em; border-radius:3em; vertical-align:baseline; font-size:1.125em}
#popup_gift .lottery_present .img{padding:0 2em;}
#popup_gift .lottery_present .pop_btn_wrap{ text-align:center; margin:-1em 0 2em 0; }
#popup_gift .lottery_present .pop_btn_wrap .tt1{ margin-bottom:.5em; font-size:.875em; color:#888}
#popup_gift .lottery_present .pop_btn_wrap .input_st{ line-height:2em}
#popup_gift .closeBtn{ display:block; line-height:3em; font-size:1.063em; background:#eee; text-align:center; color:#888; transition:.3s}
#popup_gift .closeBtn:hover{ background:#999; color:#fff}
#popup_gift.on{ opacity:1; visibility:visible}
#popup_gift.on .obj{ opacity:1; transform:translateY(0)}

#popup_gift .present_memo > li{ padding:0 2em 2em 2em; display:none}
#popup_gift .present_memo > li .memo{ border:1px solid #ddd; padding:1em; text-align:left}
#popup_gift .present_memo > li .memo .t1{ color:#555; font-size:.875em; position:relative; padding-left:1em; margin-top:.5em}
#popup_gift .present_memo > li .memo .t1:first-child{ margin-top:0}
#popup_gift .present_memo > li .memo .t1:before{ content:""; position:absolute; left:0; top:.5em; width:.5em; height:1px; background:#666}
#popup_gift .present_memo > li .btn{ display:inline-block; padding:.5em 1em; color:#fff; background:#0063ba; border-radius:.5em; margin-top:1em; font-size:.938em}
#popup_gift .present_memo > li .btn .arrow{ margin-left:1em}
#popup_gift .present_memo > li.on{ display:block}
#popup_gift .present_memo > li.memo0,
#popup_gift .present_memo > li.memo1{ margin-top:-5%}
#popup_gift .present_memo > li.memo2,
#popup_gift .present_memo > li.memo3{ margin-top:-10%}
#popup_gift .present_memo > li.memo4,
#popup_gift .present_memo > li.memo5,
#popup_gift .present_memo > li.memo6{ margin-top:-12%}

#popup_fail{width:475px; height:505px; top:120px;}
.popup  .close{ display:inline-block; width:150px; hegiht:50px; line-height:50px; color:#fff; background:#333; margin: 30px 0 0;} 

/**/
.roulette_wrap{background: linear-gradient(0deg, #ffe9cc 0%, #ffc5c5 100%); margin-top:1em}
.roulette_wrap .bottom{ position:relative; margin-top:-18%}
.roulette_wrap .bottom .bg{ display:block}
.roulette_wrap .bottom .wrap_in{ background:#ddac93; padding:0 3% 4em 3%}
.roulette_wrap .gift{ overflow:hidden; justify-content:flex-start}
.roulette_wrap .gift > li{ flex:0 0 14.28%}
.roulette_wrap .gift > li .in{ background:#fff; padding:1em; position:relative}
.roulette_wrap .gift > li .in:before,
.roulette_wrap .gift > li .in:after{ content:""; position:absolute; left:-2px; top:-2px}
.roulette_wrap .gift > li .in:before{ width:100%; border-top:2px dashed #ddd}
.roulette_wrap .gift > li .in:after{ height:100%; border-left:2px dashed #ddd}
.roulette_wrap .gift > li .in .con{ background:#f1f1f1; border-radius:3em; padding:0 1em; font-weight:700; display:flex; height:3em; align-items:center; }
.roulette_wrap .gift > li .in .con .t1{ width:100%; text-align:center; color:#333; line-height:1.1}
.roulette_wrap .gift > li .in .t2{ text-align:center; font-size:.813em; color:#888; line-height:1.25em; height:2.5em; margin-top:.75em; overflow:hidden}
.roulette_wrap .memo{ align-items:flex-start}
.roulette_wrap .memo > li{ flex:1 1 50%; margin-top:2em}
.roulette_wrap .memo .in{ padding:0 1em}
.roulette_wrap .memo .in .tit{ margin-bottom:1.5em}
.roulette_wrap .memo .in .tit .t1{ display:inline-block; padding:.5em 1em; background:rgba(0,0,0,.5); color:#fff; font-size:1.125em; font-weight:500}
.roulette_wrap .memo .in dd{ margin-top:1.5em; position:relative; padding-left:1.5em; opacity:.8; line-height:1.3; font-size:1.125em; font-weight:500}
.roulette_wrap .memo .in dd:before{ content:"\e92b"; font-family:xeicon!important; position:absolute; left:0; top:0; line-height:1; font-size:1.25em}
.roulette_wrap .memo .in.st1 dd{ font-size:1em; margin-top:.75em}
.roulette_wrap .memo .in.st1 dd:before{ content:"\e928"; font-size:.75em; top:.25em}

@media screen and (max-width:1024px){
.roulette_wrap .gift > li{ flex-basis:25%}
.roulette_wrap .gift > li:nth-child(1),
.roulette_wrap .gift > li:nth-child(2),
.roulette_wrap .gift > li:nth-child(3){ flex-basis:33.33%}
.roulette_wrap .gift > li:first-child .in:after{ display:none}
.roulette_wrap .gift > li .in .con .t1{ font-size:.875em}
.roulette_wrap .memo > li{ flex-basis:100%}
}
@media screen and (max-width:480px){
.roulette_wrap .gift > li{ flex-basis:33.33%}
.roulette_wrap .gift > li:nth-child(1),
.roulette_wrap .gift > li:nth-child(2),
.roulette_wrap .gift > li:nth-child(3),
.roulette_wrap .gift > li:nth-child(4){ flex-basis:50%}
}