@charset "UTF-8";

input[type="text"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, input[type="date"]:focus,input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {outline:none; border-color:#4EBBE2;}
input[type="text"], input[type="password"], input[type="number"] {width:100%;height:35px;border:1px solid #d1d1d1;text-indent:10px; font-size:14px;}

input[type="checkbox"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
input[type="checkbox"] + label, input[type="checkbox"] + input[type="hidden"] + label {display:inline-block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; font-size:12px; color:#777; font-family:"NBK";}
input[type="checkbox"] + label:before, input[type="checkbox"] + input[type="hidden"] + label:before {content:' '; display:inline-block; width:17px; height:17px; line-height:17px; margin:-2px 8px 0 0; text-align:center; vertical-align:middle; background:#fff; color:#777; border:1px solid #cacece}
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:checked + input[type="hidden"] + label:before {content:' '; border-color:#008ab0; background:url(https://resource2018.nuskinkorea.co.kr/images/mobileWeb/icon_check.png) no-repeat center #fff; background-size:9px 7px; }

.radio_box input + label {font-size:13px;letter-spacing:-1px;margin: 5px 6px 15px 0}

#loginWarp .loginSection{}
.loginSection .logoArea {margin:30px auto; text-align: center;vertical-align: middle;}
.loginSection .logoArea img{width: 240px; height: 60px; position: relative; left: 30px;}
.loginSection .inputArea{margin: 15px; border-bottom: 1px solid #e0e0e0;}
.loginSection .inputArea input{margin-bottom: 15px;}
.loginSection .inputArea .loginBtn{background-color: #4EBBE2; color: #FFFFFF; font-size: 15px; width: 100%; height: 40px;margin-bottom: 10px;}
.loginSection .linkArea {text-align: center; line-height: 30px;}
.loginSection .linkArea { color: #777;}
.loginSection .linkArea .contour{width: 0.5em; float: left;}


#rouletteWrap{font-family: nanum; font-size: 14px;}
#rouletteWrap .sectionLine{margin: 30px auto; height: 8px; background-color: #e0e0e0;}


#rouletteWrap .eventSection{}
#rouletteWrap .eventSection .welcome{
	display:inline-block;
	width: 100%;
	height: 300px;
	background:url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/roulette_top_2207.jpg) no-repeat center #fff;
	background-size: cover;
}
.welcome2{
	display:inline-block;
	width: 100%;
	height: 200px;
	background:url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/roulette_top_2308.png) no-repeat center #fff;
	background-size: cover;
}
#rouletteWrap .eventSection .welcome h1,h3, #rouletteWrap .eventSection .welcome2 h1,h3{color: #4EBBE2; text-align: center;margin-top:60px;}
#rouletteWrap .eventSection .welcome p, #rouletteWrap .eventSection .welcome2 p{text-align: center; line-height: 25px;margin-top: 8%;}
#rouletteWrap .eventSection .win{
	display:inline-block;
	width: 100%;
	height: 250px;
	background:url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/top_bg_win.jpg) no-repeat center #fff;  /*배경 이미지 이거임!!!!!!*/
	background-size: cover;
}
#rouletteWrap .eventSection .win h1,h3{color: #FFFF00; text-align: center;margin-bottom: 25px;font-size: 27px;}
#rouletteWrap .eventSection .win p{color: #FFFFFF; text-align: center; line-height: 20px;font-size: 16px;}
#rouletteWrap .eventSection .welcome.win p, #rouletteWrap .eventSection .welcome2.win p{color: #818286;}
#rouletteWrap .eventSection .welcome2 .subText{font-size: 16px; text-align: center; margin-top: 2%; color: #818286;}

#rouletteWrap .eventSection .fail{
	display:inline-block;
	width: 100%;
	height: 200px;
	background:url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/top_bg_fail.jpg) no-repeat center #fff;
	background-size: cover;
}
/*#rouletteWrap .eventSection .fail h1,h3{display: none;}*/
#rouletteWrap .eventSection .fail p{color: #818286; margin: 60px 0 10px 0; text-align: center; font-size: 24px; line-height: 30px;}

#rouletteWrap .eventSection .rouletteBox{width: 100%; height: 180px; margin-left: auto; margin-right: auto;}
.rouletteBox .playBtn{
	position: relative;
	width: 120px;
	height: 120px;
	margin-left: calc(50% - 60px);
	background-color: #ffaa66;
	color: #FFFFFF;
	border-radius: 50%;
	z-index: 100;
	top: -135px;
	font-weight: bold;
}
.rouletteBox .playBtn span{
	font-size: 20px;
}
.rouletteBox .playBtn p{
	font-size: 26px;
}


.rouletteBox .boxLine{position: relative; width: 100%; height: 15px; background-color: #4EBBE2;margin-bottom: 0; border-radius: 0; overflow: visible;}
.boxLine .caret{
	position:absolute; top: 15px; left: calc(50% - 8px);
	border-top: 15px solid #4EBBE2;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	z-index: 300;
}
.boxLine .caret2{
	position:absolute; top: 15px; left: calc(50% - 12px);
	border-top: 22px solid #ffaa66;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	z-index: 300;
}

.playBox{position: relative; width: 100%; height:152px; border: 1px solid #f4f4f4; overflow: hidden;}
.playBox .caretWrap{position:absolute; width: 150px; height:150px; margin-left: calc(50% - 75px);z-index: 10}

.playBox .playWrap{position:absolute; width: 1800px; height: 150px;}
.playBox .playWrap .eventItem{width: 150px; max-width: 150px; height: 150px; float: left; border-left: 1px solid #f4f4f4; text-align: center; display: table;}
.eventItem ul{display: table-cell; vertical-align: middle;}
.eventItem  li{font-size: medium; line-height: 25px; display: inline-block;}
/*.playBox .playWrap .eventFail{background-color: #f5f5f5; text-align: center;}*/
.playBox .playWrap .eventFail{width: 150px; height: 150px; background: url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/nuskin_logo.jpg) no-repeat center/ 150px 150px; }
.playBox .playWrap .eventFail2{width: 150px; height: 150px; background: url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/roulette_failImg2.jpg) no-repeat center/ 150px 150px; }
.eventFail ul, .eventFail2 ul{display: table-cell; vertical-align: middle;}
.eventFail li, .eventFail2 li{font-size: medium; line-height: 25px; color: #818286; display: inline-block;}

#rouletteWrap .giftInfoSection{margin-top : 20px; border-top: 1px dashed #7d7d7d; background-color : #ffeac5;}
#rouletteWrap .giftInfoSection h1,h3{color: #818286; margin: 35px auto; text-align: center;}
#rouletteWrap .giftInfoSection h3 p{color: #818286; margin-top: 10px; text-align: center; font-size: large;}
#rouletteWrap .giftInfoSection .topCorner{
	position: relative;
	top: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	background: url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/product_bg_top.jpg) no-repeat -25px -80px;
}
#rouletteWrap .giftInfoSection .bottomCorner{
	position: relative;
	top: 7px;
	left: calc(100% - 12px);
	width: 20px;
	height: 20px;
	background: url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/product_bg_bottom.jpg) no-repeat -405px 0 #ffffff;
}
#rouletteWrap .giftInfoSection .giftInfo{width: 90%; border: 1px solid #e4e4e4; background: #FFFFFF; margin: 0px auto 0px auto;}
#rouletteWrap .giftInfoSection .giftInfo ul li {padding-top: 5%;}

.giftInfo ul li{margin: 10px; }
.getGiftSection .giftInfo ul li{margin: 0px; }
.giftInfo ul li+li{border-top: 1px solid #e3e3e3;}
.giftInfo .giftTable{width: 100%;}
.giftInfo .giftTable tr{height: 100px;}
.giftInfo .giftTable .img{width: 40%; padding: 10px;}
.giftInfo .giftTable .giftDescription{width: 60%;}
.giftDescription .title{font-size: 18px; font-weight: bold; line-height: 25px;}
.giftDescription .desc{line-height: 25px; font-size: 12px;}

#rouletteWrap .getGiftSection {background-color: #ffeac5;}
#rouletteWrap .getGiftSection .giftInfo {width: 90%; border: 1px solid #e4e4e4; background: #FFFFFF; margin: 0px auto 0px auto;}
#rouletteWraparoRouletteWrap .getGiftSection .giftWinList{display: inline-block; width: 100%;}
.giftWinList .tHead{display: inline-block; line-height: 30px; text-align: center; font-weight: bold; color: #ff7f00; border-bottom: 2px solid #ff7f00;}
.giftWinList .tBody{display: inline-block; line-height: 27px; text-align: center; border-bottom: 1px solid #ff7f00;}

#rouletteWrap .btnSection{display: inline-block; width: 100%; }
#rouletteWrap .btnSection button{margin: 20px; width: 80%; border-radius: 0; font-weight: bold;}

#rouletteWrap {
	max-width: 600px;
	margin: 0 auto;
	min-height: auto;
}

/*ARO Roulette*/
#aroRouletteWrap .eventSection .rouletteBox{width: 100%; height: 180px; margin-left: auto; margin-right: auto;}
#aroRouletteWrap .giftInfoSection{margin: 20px auto; border-top: 1px dashed #7d7d7d; border-bottom: 1px dashed #7d7d7d; background: #f5f5f5;}
#aroRouletteWrap .giftInfoSection h1,h3{color: #818286; margin: 35px auto; text-align: center;}
#aroRouletteWrap .giftInfoSection .topCorner{
	position: relative;
	top: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	background: url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/product_bg_top.jpg) no-repeat -25px -80px;
}
#aroRouletteWrap .giftInfoSection .bottomCorner{
	position: relative;
	top: 7px;
	left: calc(100% - 12px);
	width: 20px;
	height: 20px;
	background: url(https://resource2018.nuskinkorea.co.kr/images/promotion/roulette/product_bg_bottom.jpg) no-repeat -405px 0 #ffffff;
}
#aroRouletteWrap .giftInfoSection .giftInfo{width: 90%; border: 1px solid #e4e4e4; background: #FFFFFF; margin: 20px auto 40px auto;}
#aroRouletteWrap .getGiftSection{display: inline-block; width: 100%; margin: 20px 0;}
#aroRouletteWrap .getGiftSection .giftWinList{display: inline-block; width: 100%;}
#aroRouletteWrap .rouletteBox .playBtn{background-color: #6dc687;}
#aroRouletteWrap .boxLine .caret{border-top: 15px solid #6dc687;}
#aroRouletteWrap .rouletteBox .boxLine{
	background-image: url("https://resource2018.nuskinkorea.co.kr/images/renew/promotion/roulette_line.png");
	background-position: center center;
	background-repeat: no-repeat;
}
#aroRouletteWrap .aroRouletteBanner{
	background-image: url("https://resource2018.nuskinkorea.co.kr/images/aro/back_enjoy.png");
	background-position: center center;
	background-repeat: no-repeat;
}
#aroRouletteWrap .aroRouletteBanner .aroRouletteBanner_text{position: relative; max-width: 1100px; margin: 0 auto;}
#aroRouletteWrap .aroRouletteBanner .aroRouletteBanner_text p{line-height: 24px; font-size: 15px;}

#aroRouletteWrap .giftInfo .giftTable .img img{max-width: 150px; max-height: 200px;}
#aroRouletteWrap .giftInfo ul{position:relative; display: inline-block; width: 100%;}

#aroRouletteWrap .giftWinList {width: 80%; text-align: center;}
#aroRouletteWrap .giftWinList ul{display: inline-block; width: 70%; margin: auto;}
#aroRouletteWrap .giftWinList li{display: inline-block; width: 50%; float: left;}
#aroRouletteWrap .giftWinList li.empty{display: inline-block; width: 100%;}

.modal-footer {border-top:none;}
.btn-default {margin-top: 5%;}
.row{margin-right: 0; margin-left: 0;}

/*Mobile*/
@media only screen and (max-width: 768px) {
	#aroRouletteWrap .aroRouletteBanner{height: 219px; background-size: cover;}
	#aroRouletteWrap .aroRouletteBanner .aroRouletteBanner_text{text-align: center; padding-top: 60px;}
	#aroRouletteWrap .aroRouletteBanner .aroRouletteBanner_text p{width: 70%; margin: auto;}
	#aroRouletteWrap .giftInfoSection .giftInfo{width:90%}
	#aroRouletteWrap .giftInfoSection .giftInfoNotice{width: 90%; margin: 20px auto;}
	#aroRouletteWrap .giftInfo ul li{position:relative; display: inline-block; width: 100%; margin: 0;}
	#aroRouletteWrap .giftInfo ul li+li{border-top: 1px solid #e3e3e3;}
	#aroRouletteWrap .aroRouletteBanner{
		height:210px;
		background: #91cc5e url(https://resource2018.nuskinkorea.co.kr/images/aro/back_enjoy_mb.png);
		background-position: right bottom;
		background-size: 100%;
	}
}
/*PC*/
@media only screen and (min-width: 769px) {
	#aroRouletteWrap .aroRouletteBanner{height: 419px;}
	#aroRouletteWrap .aroRouletteBanner .aroRouletteBanner_text{padding-top: 160px;}
	#aroRouletteWrap .giftInfoSection .giftInfo{width:70%}
	#aroRouletteWrap .giftInfoSection .giftInfoNotice{width:70%; margin: 20px auto;}
	#aroRouletteWrap .giftInfo ul li {position:relative; display: inline-block; float:left; margin: 0 0 10px 0;}
	#aroRouletteWrap .giftInfo ul li:first-child:nth-last-child(n), #aroRouletteWrap .giftInfo ul li:first-child:nth-last-child(n) ~ li { width: 50%; border-top: 0;}
	#aroRouletteWrap .giftInfo ul li:first-child:nth-last-child(1) { width: 100%; }
	#rouletteWrap .eventSection .welcome, #rouletteWrap .eventSection .welcome2{height: 300px;}
	#rouletteWrap .eventSection .welcome, #rouletteWrap .eventSection .welcome2.win{height: 400px;}
	#rouletteWrap .eventSection .welcome.win h3, #rouletteWrap .eventSection .welcome2.win h3{font-size: 35px;}
	#rouletteWrap .eventSection .welcome.win p, #rouletteWrap .eventSection .welcome2.win p{font-size: 20px;}
	#rouletteWrap .eventSection .welcome2 .subText{font-size: 16px; text-align: center; margin-top: 2%; color: #818286;}
}