@charset "UTF-8";

.group_bg { width: 100%; }
.main_group_area { width: 100%; position: absolute; top: 5%; left: 0; }
.main_group_inner { width: 78%; margin: 0 auto; font-size: 0; }
.left_img_area, .right_img_area { display: inline-block; width: 50%; position: relative; }
.inner_img { position: relative; }
.inner_img > img { width: 100%; }
.main_content_group { width: 100%; height: 85%; position: relative; font-size: 0;
				/*overflow-y: auto;*/ text-align: center; }
.main_content_group:before { display: inline-block; width: 0; height: 100%; position: relative;
			vertical-align: middle; overflow: hidden; content: ""; font-size: 0; }
.main_content_group_inner { display: inline-block; width:95%; vertical-align: middle; position: relative; }
			
.on_img { display: none; position: absolute; top: 0; left: 0; }
.hide_img { position: absolute; top: 0; left: 0; z-index: 140; }
.hide_img.hide { display: none; }
.on_img.on { display: block; }
.icon_hide { display: none; }
img.info_img { width: 50%; position: absolute; top: 38%; z-index: 80; }
.left_img_area .info_img_top { left: 35%; }
.left_img_area .info_img_center { left: 10%; }
.left_img_area .info_img_bottom { left: 40%; }

.right_img_area .info_img_top { right: 35%; }
.right_img_area .info_img_center { right: 10%; }
.right_img_area .info_img_bottom { right: 40%; }

.center_img { position: absolute; top: 25%; left: 0; }
.footer { width: 100%; position: relative; padding: 20px 0; z-index: 300; /*position: absolute; bottom: 0; left: 0;*/
			background-image: url(../images/bg_2.png);
			background-size: cover; background-repeat: no-repeat;
			background-position: center center; }
.stamp_img { display: block; width: 30px; height: 30px;
			position: absolute; top: 50%; left: 20px; margin-top: -15px; }
.fonnter_content { padding-left: 70px; }
.fonnter_content > li { width: 100%; font-size: 0; }
.foot_text, .hyphen { display: inline-block; color: #FFF; letter-spacing: -0.5px; vertical-align: top; font-size: 0.80rem; }
.foot_text { width: 97%; line-height: 1rem; word-break: keep-all; }
.hyphen { width: 3%; }
.btn_notice { width: 50px; height: 50px; position: absolute; bottom: 0; right: 5%;  }
.coupon_link_icon { width: 50px; height: 50px; position: absolute; bottom: 0; left: 5% }


/* progress bar */
.progressbar { width: 100px; height: 100px; margin: 0 auto; text-align: center; position: absolute;
			top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;
			background-image: url(../images/progressbar_bg.png);
			background-repeat: no-repeat; background-position: center center;
			background-size: contain; z-index: 150; }
.progress{ width: 80px; height: 90px; position: absolute; top: 50%; left: 50%; margin-top: -45px; margin-left: -40px; }
.progress .track, .progress .fill{ fill: rgba(0, 0, 0, 0); stroke-width: 65;
			transform: translate(75px, 665px)rotate(-90deg); }
.progress .track{ stroke: rgba(255,255,255,0.2); }
.progress .fill { stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-dasharray: 2160;
			stroke-dashoffset: 2160;transition: stroke-dashoffset 1s; }
.progress.blue .fill { stroke: rgb(3,166,223); }
.progress .value, .progress .text { fill: rgb(255, 255, 255); text-anchor: middle; }
.progress .value { font-size: 160px; fill: rgb(3,166,223); font-weight: bold; }
.progress .text { font-size: 120px; }
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor: default; }
.title { font-size: 110px; fill: rgb(255,255,255); }

/*@media only screen and (min-width:360px) {
	.main_content_group { margin: -8% 0; }
}*/

/* jeju_photo_list.html */
.photo_list { width: 100%; margin-bottom: 0.5px; overflow: hidden; position: relative; }
.list_img { width: 100%; }
.full_view_icon, .download_icon { width: 50px; height: 50px; padding: 8px;
			position: absolute; }
.full_view_icon { top: 10px; right: 10px; }
.download_icon { bottom: 10px; left: 10px; }

/* jeju_full_view.html */
.photo_list_wrap { padding-top: 50px; }
.full_view_wrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
.full_img { width: 100%; /*height: 100%;*/ position: relative;
			/* background-image: url(../images/img_full/img_full_1.png); */
			background-size: 100%; background-repeat: no-repeat;
			background-position: center center; background-color: #000; }
.full_img_type { width: 100%; }
.close_btn, .full_view_down { width: 50px; height: 50px; padding: 8px;
			position: absolute; right: 10px; }
.close_btn { top: 10px; z-index: 520; }
.full_view_down { bottom: 10px; }

/* jejuair_loading.html */
.loading { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);
			position: fixed; top: 0; left: 0; font-size: 0; text-align: center; vertical-align: middle;
			z-index: 550; }
.loading:before { display: inline-block; width: 0; height: 100%; position: relative;
			vertical-align: middle; overflow: hidden; font-size: 0; content: ""; }

#loading_img { display: inline-block; width: 120px; height: 120px; margin: 0 auto; 
			position: relative; vertical-align: middle; overflow: hidden; }


/* jejuair_roulette1.html */
.roulette_bg { overflow-x: hidden; width: 100%; height: 100%; position: fixed; top: 0; left: 0;
			font-size: 0; text-align: center; overflow-y: auto; z-index: 500; 
 			background-image: url(../images/event_bg.png);
			background-size: cover; background-repeat: no-repeat;
			background-position: center center; }
.roulette_bg:before { display: inline-block; width: 0; height: 100%; position: relative;
			vertical-align: middle; overflow: hidden; font-size: 0; content: ""; }
.roulette_inner > img { display: block; width: 80%; margin: 5% auto; text-align: center; }
.event_tit { padding: 5px 7px; font-weight: bold; color: #FFF; font-size: 0.90rem; }
.event_benefit_box { width: 85%; margin: 0 auto; padding: 15px 10px; overflow: hidden;
			border: 2px solid #FFF; border-radius: 15px; }
.benefit_inner { text-align: left; vertical-align: middle; }

.benefit_inner > span { display: inline-block; padding: 0 2px; vertical-align: top; color: #FFF; letter-spacing: -0.5px; }
.dot { width: 5%; font-size: 1rem; }
.event_text { width: 95%; font-size: 0.8rem; line-height: 1rem; }

.benefit_tit { font-size: 0.8rem; color: #FFF; text-align: center; }
.benefit_tit_area { width: 100%; margin: 0 auto; text-align: center; }
.benefit_box_img { display: inline-block; width: 100%; text-align: center; }
.mycoupon_box { width: 100%; height: 60px; line-height: 60px; background-color: #000;
			position: fixed; bottom: 0; left: 0; }
.mycoupon_box_inner { width: 85%; margin: 0 auto; position: relative; text-align: left; }
.mycoupon_box_inner > strong { display: inline-block; color: #f15a21; font-size: 0.9rem; }
.mycoupon_num_box { display: table; width: 60px; height: 30px; line-height: 30px; text-align: center;
			background-color: #FFF; border-radius: 15px; position: absolute; top: 50%; right: 0; margin-top: -15px; }
.mycoupon_num { display: table-cell; vertical-align: middle; font-size: 0.9rem;
			text-align: center; line-height: 1; color: #05a7e1; }


/* jejuair_roulette2.html */
#event_coupon_wrap { display: none; }
.event_coupon { max-width: 300px; margin-top: -15%; background: transparent; }
.event_popup_x { width: 50px; height: 50px; padding: 10px; float: right; }
.coupon_header { width: 100%; clear: both; }
.event_coupon_content { vertical-align: top; background-color: #FFF; }
.coupon_tit { display: block; padding: 15px 0; font-size: 1rem; color: #f15a21; }
.coupon_img_area { width: 75%; margin: 5% auto; }
.coupon_img { width: 100%; }
.coupon_txt, .coupon_sub_txt { width: 90%; margin: 0 auto; }
.coupon_txt { display: block; font-size: 0.90rem; line-height: 1rem; color: #000; padding: 20px 0; }
.coupon_sub_txt { padding-bottom: 20px; word-break: keep-all; font-size: 0.80rem; color: #6d6e73;
			line-height: 1rem; letter-spacing: -0.5px; }
.coupon_info { width: 100%; padding: 20px 0; font-size: 0; background-color: #000; }
.coupon_info_inner { width: 80%; margin: 0 auto; }
.coupon_info_inner > span { display: inline-block; color: #FFF; font-size: 0.830rem; }
.coupon_info_name { width: 30%; text-align: left; }
.coupon_info_content { width: 70%; text-align: left; }

.roulette_wrap { width: 85%; margin: 15% auto; position: relative; }
.roulette_inner { padding-bottom: 70px; }
.roulette_inner, .roulette_group { display: inline-block; width: 100%; margin: 0 auto; 
			position: relative; vertical-align: middle; overflow: hidden; }
.roulette_group { padding-bottom: 0; }
/*.roulette_area { position: relative; z-index: 100; }*/
.pic_area { width: 100%; margin: 0 auto; position: absolute; top: -20px; left: 0; z-index: 150; }
.r_stop_btn { width: 80px; height: 80px; position: absolute; top: 50%; left: 50%;
			margin-top: -40px; margin-left: -40px; z-index: 160; }
.picker { display: block; width: 10%; margin: 0 auto; }
.r_shadow { display: block; width: 100%; margin: 0 auto; position: absolute; bottom: -15px; left: 0; z-index: 80; }
.roulette { width: 100%; z-index: 100; position: relative; }
.roulette.on {
			-webkit-animation:rotate 1s linear infinite;
			-moz-animation:rotate 1s linear infinite;
			-ms-animation:rotate 1s linear infinite;
			-o-animation:rotate 1s linear infinite;
			animation:rotate 1s linear infinite; }
@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg)}
  to   {-webkit-transform:rotate(-720deg)}
}
@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg)}
  to   {-moz-transform:rotate(-720deg)}
}
@-ms-keyframes rotate {
  from {-ms-transform:rotate(0deg)}
  to   {-ms-transform:rotate(-720deg)}
}
@-o-keyframes rotate {
  from {-o-transform:rotate(0deg)}
  to   {-o-transform:rotate(-720deg)}
}
@keyframes rotate {
  from {transform:rotate(0deg)}
  to   {transform:rotate(-720deg)}
}
.roulette.stop {
			-webkit-animation:stopRotate 2s ease-out;
			-moz-animation:stopRotate 2s ease-out;
			-ms-animation:stopRotate 2s ease-out;
			-o-animation:stopRotate 2s ease-out;
			animation:stopRotate 2s ease-out;
			-webkit-animation-fill-mode: forwards;
			-moz-animation-fill-mode: forwards;
			-ms-animation-fill-mode: forwards;
			-o-animation-fill-mode: forwards;
			animation-fill-mode: forwards; }
/* 룰렛이멈췄을경우 키프레임 */
@-webkit-keyframes stopRotate {
  from {-webkit-transform:rotate(0deg)}
  to   {-webkit-transform:rotate(-720deg)}
}
@-moz-keyframes stopRotate {
  from {-moz-transform:rotate(0deg)}
  to   {-moz-transform:rotate(-720deg)}
}
@-ms-keyframes stopRotate {
  from {-ms-transform:rotate(0deg)}
  to   {-ms-transform:rotate(-720deg)}
}
@-o-keyframes stopRotate {
  from {-o-transform:rotate(0deg)}
  to   {-o-transform:rotate(-720deg)}
}
@keyframes stopRotate {
  from {transform:rotate(0deg)}
  to   {transform:rotate(-720deg)}
}

@media only screen and (min-width: 375px) {
  .footer { position: absolute; bottom: 0; left: 0; }
}
/* 풀 이미지 가로모드일경우 */
@media only screen and (min-width: 568px) and (orientation: landscape) {
  .full_img { background-size: contain; }
}

/* 171120 추가 */
.roulette_inner { vertical-align: top; padding-top: 60px; }
.roulette_start_area { width: 100%; position: relative; }
.roulette_start_area > img { width: 100%; }
.roulette_start_btn { display: block; width: 80px; height: 80px; 
			position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px; }