@charset "utf-8";
@import url(../css/animate.css);
@import url(../css/animal.css);

html, body {
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", DFKai-SB, sans-serif;
	background: url('../images/bg_water.png') center 80px no-repeat fixed;
	background-size: auto 650px;
	background-color: rgba(68, 185, 180, 0);
	overflow: hidden;
}

h1 {font-size: 5em; font-weight: 900; font-style: normal;}
h2 {font-size: 3em; font-weight:bold;}
h3 {font-size: 1.675em; font-weight:normal;}
h4 {font-size: 1.2em; font-weight:normal;}
h5 {font-size: 0.875em; font-weight:normal;}

a {text-decoration:none; color: black;}
a:hover {color: rgb(150,150,150); cursor: pointer;}

.swipe {
  margin: 0 auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  width: 900px; height: 600px;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

#console {
  font-size: 12px;
  font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  color: #999;
  line-height: 18px;
  margin-top: 20px;
  max-height: 150px;
  overflow: auto;
}

div.title_1, div.title_2, div.title_3, div.title_4 {
	width: 137px; height: 110px;
	position: absolute; top:0; left:0; z-index: 320;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

div.title_1 {background: url('../images/step_title_1.png');}
div.title_2 {background: url('../images/step_title_2.png');}
div.title_3 {background: url('../images/step_title_3.png');}
div.title_4 {background: url('../images/step_title_4.png');}

div.step_1, div.step_2, div.step_3, div.step_4 {
	width: 900px; height: 120px;
	position: absolute; bottom:20px; left:0;
	background: url('../images/step.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
}

div.step_1 {background-position: center top;}
div.step_2 {background-position: center -120px;}
div.step_3 {background-position: center -240px;}
div.step_4 {background-position: center -360px;}


/*------------------------------------------*/
/*****************gift_inside start*****************/
div.gift_inside {
	width: 700px; height: 400px; z-index: 310;
	position: absolute; top:0px; left:70px;
}

span.point, span.sn {color: #a40000;}
span.mark {color: #ffe400;}

div.gift_inside h3, div.gift_inside h4 {display: inline;}
div.gift_inside ul {text-align: left; line-height: 36px;}
div.gift_inside li {position: relative; top: 0px; display: inline-block; margin-right: 10px;}
div.gift_inside li.gifd_card {width: 175px; }
div.gift_inside li.gifd_word {width: 475px; }
div.gift_inside img {margin: 68px auto;}
/*****************gift_inside start*****************/
/*------------------------------------------*/

div.next_btn {
	margin: 0 auto;
	width: 900px; z-index: 330;
	position: relative; bottom:50px;
}

button.next {
	width: 106px; height: 86px;
	position: relative; right: -750px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
}

div.next_btn img {position: relative; right: 5px;}

button, button:checked  {border: 0px solid #FFFFFF;}


div.role_ship_small {
	width: 118px; height: 120px; z-index: 302;
	background: url('../images/role_ship_r.png') no-repeat;
	background-position: center top;
	background-size: 108px 110px;
}

div.ship_step1 {position: absolute; top:0px; left: 0px;}
div.ship_step2 {position: absolute; top:0px; left: 210px;}
div.ship_step3 {position: absolute; top:0px; left: 420px;}
div.ship_step4 {position: absolute; top:0px; left: 630px;}

/*------------------------------------------*/
/*****************check input start*****************/
.swipe-wrap ul {margin: 0 auto; height: 600px;}

.swipe-wrap ul li img {margin: 0 auto; padding: 0; border: 0;}

.swipe-wrap ul li{
	margin: 0 auto;
  color: #000;
  display: inline-block;
  position: relative; top: 100px; z-index: 305;
  width: 220px;
  height: 350px;
}

.swipe-wrap ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

.swipe-wrap ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.4em;
	line-height: 32px;
  padding: 10px 15px 45px 55px;
  margin: 10px auto;
  height: auto;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

.swipe-wrap ul li label.small {font-size: 1em;}

.swipe-wrap ul li:hover label{
	color: #FFFFFF;
}

.swipe-wrap ul li .check{
	display: block;
	width: 15px; height: 15px; z-index: 5;
	position: absolute; top: 23px; left: 30px;
  border: 5px solid #000;
  border-radius: 100%;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

.swipe-wrap ul li:hover .check {
  border: 5px solid #FFFFFF;
}

.swipe-wrap ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 9px;
  width: 9px;
  top: 3px;
	left: 3px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

.swipe-wrap input[type=radio]:checked ~ .check {
  border: 5px solid #ffe400;
}

.swipe-wrap input[type=radio]:checked ~ .check::before{
  background: #ffe400;
}

.swipe-wrap input[type=radio]:checked ~ label{
  color: #ffe400;
}
/*****************check input end*****************/
/*------------------------------------------*/


/*------------------------------------------*/
/*****************RWD start*****************/
/*當螢幕寬度在1400px~1499之間*/
@media screen and (min-width:1200px) and (max-width: 1499px){

}

/*當螢幕寬度在950px~1499px之間*/
@media screen and (min-width: 950px) and (max-width: 1199px){
	h1 {font-size: 5em; font-weight: 900; font-style: normal;}
	h2 {font-size: 3em; font-weight:bold;}
	h3 {font-size: 2.5em; font-weight:normal;}
	h4 {font-size: 2em; font-weight:normal;}
	h5 {font-size: 1.6em; font-weight:normal;}
}


/*當螢幕寬度在320px~999px -device- 之間*/
@media screen and (min-width: 320px) and (max-width: 950px){

}
/******************RWD end******************/
/*------------------------------------------*/