@charset "utf-8";
* {margin:0;padding:0}
body {color:#fff;font-size:12px;line-height:1;font-family:sans-serif;-webkit-text-size-adjust:none;-webkit-tap-highlight-color: transparent;-webkit-user-select:none;-webkit-touch-callout:none; background-color:#F3F3F3; overflow: hidden;}
html, body{height:100%;-webkit-user-select:none;-webkit-touch-callout:none;color:#ffffff;}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:sans-serif;letter-spacing:-1px}
ul, ol, li {list-style-type:none;}
div, p, span, li, table td {word-break:break-all;color:#ffffff;}
img{border:0 none}
table{*empty-cells:show;border-collapse:collapse}
a {color:#262628;text-decoration:none}

/* main */
.wrapper {position:relative;width:360px;height:640px;margin:0 auto;overflow-y:auto;overflow-x:hidden; border: 1px solid #000000; border-radius: 5px;}
.wrapper_bg {width:100%;height:100%;background:url('../../img/roulette/gradation_bg.png') top left no-repeat;background-size:100% auto;}
.top_area {width:100%;height:50px;}
.top_area img{height: 16px; padding:17px;}
.detail_info {height:123px; text-align: center; vertical-align:middle;line-height:30px;}
.detail_info_title {font-size:25px; font-weight:bold; color:#ffffff;}
.detail_info_sub_title {font-size:15px; color:#ffffff;}
.contents_body {background-color:#eaeaea;}
.coupon_guide {padding:30px 20px 5px 25px; min-height:68px; }
.coupon_guide_left {float:left; min-width:68px; font-size:15px; color:#6e6d73; border-right:1px solid grey;padding-right:10px;line-height:17px;font-weight:bold; text-align: center;}
.coupon_guide_right {float:left; font-size:12px; color:#6e6d73; text-align: left; vertical-align: top; padding-left:15px;line-height:15px; min-width:180px; white-space:pre;}
.btn_group {width:83%; font-size:15px; margin:0 auto; padding:5px 0 40px 0;}
.btn_group .btn_menu {width:45%; font-size:15px; cursor:pointer;}
.btn_group .btn_menu a {color:#9a8377;text-decoration:underline;}
.btn_group .btn_left {float:left;text-align:left; }
.btn_group .btn_right {float:right;text-align:right; }
.dimmed{z-index:25;position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,0.5);overflow:hidden;}

/* main stamp area */
.stamp_area {width:100%;margin-top:20px; text-align:center;}
.new_badge {margin-left:38px;width:18px;height:18px;background:url('../../img/roulette/icon/new_badge.png') no-repeat top right;background-size:18px;}
ul li.detail_area {display:inline-block;width:60px;text-align:center;margin-bottom:10px;}
ul li.detail_area div.stamp_mark {margin:0 auto;width:50px;height:50px;font-size:20px;line-height:50px;background:url('../../img/roulette/icon/none_stamp.png') no-repeat center center;background-size:47px;}
ul li.detail_area div.stamp_mark.on {background:url('') no-repeat center center;background-size:47px;}
ul li.detail_area div.stamp_mark.off {background:url('') no-repeat center center;background-size:47px;}
ul li.detail_area div.stamp_mark.coupon {background-image:url('../../img/roulette/icon/on_stamp.png');background-repeat: no-repeat;background-position: center center; background-size:47px;}
ul li.detail_area div.stamp_mark_on {margin:0 auto;width:50px;height:50px;font-size:20px;line-height:50px;background-repeat:no-repeat;background-position:center center;background-size:47px;}


/* main coupon list */
.contents_coupon_list_div {width:90%; text-align:left;margin:0 auto; padding-bottom:10px;}
.contents_coupon_list_div ul {}
.contents_coupon_list li {width:100%; margin-bottom:10px;cursor:pointer;}
.coupon_div {width:100%; height:105px;;margin-bottom:10px; background-color: #ffffff;}
.coupon_img {width: 85px; height: 85px; padding: 10px;}
.coupon_brief_info {display: inline-block; padding-top: 25px; padding-left: 10px; vertical-align: top;}
.coupon_brief_info_title {color: #000; font-size: 17px; line-height: 25px;}
.coupon_brief_info_subtitle {font-size: 12px; color: #6e6d73; line-height: 17px; width: 70px; display: inline-block;}
.coupon_brief_info_subtext {font-size: 12px; color: #6e6d73; line-height: 17px;}
.coupon_brief_info_nostamp {padding-top:60px; text-align:center; cursor:default !important;}
.coupon_brief_info_nostamp span {font-size: 17px; color: #ffffff}

/* Layer Popup */
.popup {z-index:210;position:absolute;left:50%;top:50%;width:86%;margin-top:-50px; margin-left:-43%;background-color:#eaeaea;}
.popup_area {z-index:200;position:absolute;left:50%;top:116px;width:360px;height:640px;margin-left:-180px;}
.popup_con {padding:30px 20px 70px 20px;font-size:18px;color:#556078;text-align:center;line-height:1.4em;}
.popup_con p {margin:10px 0;color:#6e6d73;}
.popup_con strong {color:#dd5653;}
.popup_btn {position:absolute;left:0;bottom:0;width:100%;text-align:center;font-size:0;border-top:solid 1px #dbdbdb;}
.popup_btn a {padding:15px 0;font-size:16px;color:#6e6d73;display:block;}
.popup_btn li {width:100%;}

/* common_popup */
.popup_common {z-index:200;position:absolute;left:50%;top:116px;width:360px;height:640px;margin-left:-180px;display: none; z-index: 10000;}
.popup {z-index:210;position:absolute;left:50%;top:50%;width:86%;margin-left:-43%;background-color:#eaeaea;}
.popup_contents_div {padding:30px 20px 70px 20px;font-size:18px;color:#556078;text-align:center;line-height:1.4em;}
.popup_contents_title {margin: 10px 0; color: #dd5653; font-weight: 400;}
.popup_contents_text {font-size:15px;color:#6e6d73;line-height:18px;}
.popup_button {position:absolute;left:0;bottom:0;width:100%;text-align:center;font-size:0;border-top:solid 1px #dbdbdb; cursor:pointer;}
.popup_button a {width:100%; padding:15px 0;font-size:16px;color:#6e6d73;display:block;}

/* popup_coupon */
.popup_coupon_wrapper {z-index:200;position:absolute;left:50%;top:116px;width:360px;height:640px;margin-left:-180px;display: none;}
.popup_coupon_dim {z-index:300;position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);overflow:hidden;}
.popup_coupon {z-index:400;position:absolute;left:50%;top:50%;width:88%;margin-left:-44%;background-color:#ffffff;}
.popup_coupon_complete {display:none;font-size:0;outline:0;border:0;magin:0;padding:0;width:40%;max-width:210px;-ms-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);transform:rotate(-20deg);z-index:99999;position:absolute;top:45%;right:9%;}
.popup_coupon_complete_contents {width:100%;height:100%;position:relative;}
.popup_coupon_complete_backcolor {z-index:0;position:absolute;top:3.2055%;left:3.2055%;width:93.589%;height:93.589%;border-radius:50%;opacity:0.89;background:url(../../img/roulette/icon/use_complete.png) no-repeat center center;font-size:1em;color:#fff;background-size:contain;background-color:#7fc3f2;}
.popup_coupon_complete_text {position:absolute;width:100%;font-size:1.250rem;color:#fff;text-align:center;top:50%;line-height:0;font-family:sans-serif;}
.popup_coupon_complete_outline {width:100%;z-index:1;}
.popup_coupon_contents {width: 100%; text-align: center;}
.popup_coupon_close_div {height: 17px; padding: 7px 0; text-align: right;}
.popup_coupon_close_img {width: 17px; height: 17px; padding-right: 10px; cursor: pointer;}
.popup_coupon_header_img {width: 200px; height: 17px; padding: 7px 0;}
.popup_coupon_image_img {width: 200px; height: 200px; padding: 10px 0;}
.popup_coupon_title {font-size: 20px; font-weight: bold; color: #000000; line-height: 25px; margin-bottom: 25px; padding: 10px 0 15px 0; text-align: center;}
.popup_coupon_info_div {padding-bottom: 30px; line-height: 20px;}
.popup_coupon_info_title {width: 85px; display: inline-block; color:#6e6d73; font-size: 15px; text-align: left;}
.popup_coupon_info_text {width: 130px; display: inline-block; color:#6e6d73; font-size: 15px; text-align: left;}
.popup_coupon_bottom {font-size: 15px; padding: 15px 0; background-color: #67b6f9;}

/* Roulette */
.div_roulette_info {width: 86%; margin: 0 auto; padding: 15px 0;}
.div_roulette_info_tit {width: 100%; border-radius: 100px; background-color: #d6d7d9; font-size: 1.2em; padding: 14px 0; color: #6d6e73; letter-spacing: -0.4px; font-weight: bold;}
ul.event_ul li {background: url('../../img/roulette/icon/slide_dot_cur.png') no-repeat left center; background-size: 4px; padding-left: 3%; width: 47%; font-size: 14px; line-height: 18px; display: inline-block; }

/* demo_view_header */
.demo_view_header {position: relative; width: 100%; height: 40px; line-height: 40px; background-color: #000;  border-bottom-left-radius:10px;border-bottom-right-radius:10px; text-align: center;}
.under_pointer {position: absolute; width: 15px; top:100%; left:50%; margin-left: -10px;}
.demo_view_title {color: #fff; font-size: 0.9em;}

/*demo_view_console*/
.demo_view_console {margin:0 auto; display:block; text-align: center; width: 60%;}
.stamp_btn {position: absolute;top: 40%;left: 40%;font-size: 18px;color:red;cursor: pointer;z-index: 99999;}
.demo_stamp_btn {margin:0 auto; margin-top: 20px; display:block; text-align: center;}
.demo_stamp_btn span {width: 100px; height: 38px;background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;display: inline-block; cursor: pointer;}
.btn_stamp_01 {background-image:url(../../img/roulette/btn/btn_stamp01_off.png); margin-bottom: 15px;}
.btn_stamp_01:hover {background-image:url(../../img/roulette/btn/btn_stamp01_on.png);}