@charset "UTF-8";
/*思源黑體*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,button,a{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	letter-spacing: 0.7px;
	vertical-align: baseline;
	text-decoration: none;
	box-sizing: border-box;
}

body {
	color: #55576d;
	background:#84b0dd; 
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
	font-family: "Noto Sans TC","微軟正黑體","Helvetica Neue",sans-serif;
}

html, body { height: 100%; }

a{
	color:#55576d;
	text-decoration:none;
}
button{	background: none; }

h1, h2, h3, h4, h5, h6{ font-weight: 700; font-size:1rem; line-height: 120%; }

ol, ul {
	list-style: none;
}

table {width:auto; 	border-collapse: collapse; border-spacing: 0; }

input, button, textarea,select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: none;
}
/*reset end*/

/*Input*/
input[type="text"],
input[type="password"] { width: 100%; min-width: 100px; padding: 5px 10px; height: 42px; line-height: 32px; background: #eee; border-radius: 2px; }

.subT { font-size: 15px; }
.smallT { font-size: 14px; }
.bigT { font-size: 21px; }
.biggerT { font-size: 24px; }
.biggestT { font-size: 28px; }

.tL{ text-align:left; }
.tR{ text-align:right; }
.tC{ text-align:center; }
.tB{ font-weight: bold; }

.fL{ float:left; }
.fR{ float:right; }

.clr{clear:both;}

.web{ display:block; }
.mobile{ display:none; }

.tBig { font-size: 18px; }
.tBigger { font-size: 21px; }
.botM0 { margin-bottom: 0; }
.botM { margin-bottom: 16px; }
.botM2 { margin-bottom: 26px; }
.botM3 { margin-bottom: 32px; }

.color_red { color: #ff4a53; }
.color_blue { color: #0db2cf; }

.imgbox {  }
.imgbox img { display: block; max-width: 100%; }
.imgbox.full img { width: 100%; }
.imgbox.tC img { margin: 0 auto; }

/*-----------------頁面-----------------*/
.wrapper { max-width: 768px; min-height: 100vh; margin: 0 auto; background: #fff; }
.content { text-align: justify; }
.inner_padding { padding: 16px 10px; }




/*-----------------頁面內-----------------*/

.head_title { color: #fff; background: #69af32; }
.head_title h1 { line-height: 50px; text-align: center; font-size: 24px; font-weight: 400; }
/*nav*/
.head_nav ul { display: flex; padding: 20px 0; background: #ff750d; }
.head_nav li { flex: 1 1 auto; }
.head_nav a { display: block; text-align: center; font-size: 18px; font-weight: 500; color: #fff; border-right: solid 1px #f1aa97; }
.head_nav li:nth-last-child(1) a { border: none; }
.head_nav a span { padding-left: 28px; }
.head_nav a.on { color: #f9e21c; }
.head_nav a .icon01 { background: url(../images/icon_head_nav_01.png) left center no-repeat; background-size: auto 22px; }
.head_nav .on .icon01 { background: url(../images/icon_head_nav_01_on.png) left center no-repeat; background-size: auto 22px; }
.head_nav a .icon02 { background: url(../images/icon_head_nav_02.png) left center no-repeat; background-size: auto 24px; }
.head_nav .on .icon02 { background: url(../images/icon_head_nav_02_on.png) left center no-repeat; background-size: auto 22px; }
.head_nav a .icon03 { background: url(../images/icon_head_nav_03.png) left center no-repeat; background-size: auto 22px; }
.head_nav .on .icon03 { background: url(../images/icon_head_nav_03_on.png) left center no-repeat; background-size: auto 22px; }

h2 { margin: 0 0 20px; font-size: 24px; color: #262f48; }
h3.tag { text-align: center; }
h3.tag span { display: inline-block; margin-bottom: 15px; padding: 0 25px; line-height: 32px; color: #fff; background: #84b0dd; border-radius: 16px; }
h4.tag { text-align: center; }
h4.tag span { display: inline-block; margin-bottom: 15px; padding: 0 25px; line-height: 32px; color: #84b0dd; border: solid 2px #84b0dd; border-radius: 16px; }
h4 { font-size: 18px; }
h5 {  }
h6 { font-size: 15px; }

ul.point { list-style-position:outside; }
ul.point li { position: relative; text-indent: 12px; text-align:justify; }
ul.point li::before { content: ""; display: inline-block; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; vertical-align: middle; border-radius: 3px; background: #1aa3b8; }

ol.num {}
ol.num li { position: relative; counter-increment: li; padding-left: 2em; }
ol.num li::before { position: absolute; top: 0; left: 0; content: "."counter(li); font-weight: 700; color: #1aa3b8; display: block; width: 2em; padding-right: 5px; box-sizing: border-box; text-align: right; direction: rtl; }

hr.line { width: 100%; height: 1px; background: url(../images/line_01.png) repeat-x; background-size: auto 1px; border: none; }

/*任務步驟*/
.stepArea { display: flex; max-width: 330px; margin: 0 auto 20px; }
.stepList { max-width: 340px; }
.stepList li { display: flex; margin-bottom: 6px; line-height: 24px; }
.stepList_num { margin-right: 10px; }
.stepList_num span { display: inline-block; padding: 0 10px; font-size: 14px; color: #fff; background: #0db2cf; border-radius: 12px; }
.stepList_inner {  }

/*贈品*/
.giftArea { position: relative; max-width: 340px; margin-right: auto; margin-left: auto; padding: 26px 10px 26px 75px; font-size: 15px; background: #eaf8eb; border-radius: 10px; }
.giftArea::after { content: ""; display: block; position: absolute; top: calc(50% - 30px); left: -10px; width: 62px; height: 60px; background: url(../images/gift_01.png) center no-repeat; background-size: auto 100%; }
.giftList li { color: #556d57; }
ul.giftList li::before { background: #556d57; }

/*任務*/
.mission_title { position: relative; display: flex; justify-content: space-around; margin-bottom: 15px; }
.mission_title_bg { position: absolute; top: 0; left: 25%; width: 50%; height: 75px; background: url(../images/img_mission_01.png) center repeat-x; }
.mission_title_bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: url(../images/img_mission_02.png) center no-repeat; background-size: auto 60px; } 
.mission_title_item { position: relative; z-index: 2; width: 75px; height: 75px; margin: 0 auto; line-height: 75px; text-align: center; color: #84b0dd; background: #fff; border: solid 2px #84b0dd; border-radius: 75px; }
.mission_inner { display: flex; margin-bottom: 32px; }
.mission_inner_item { flex: 1 1 auto; width: calc(50% - 10px); }
.mission_inner_item:nth-child(1) { margin-right: 20px; }

.btn {  }
.btn a { display: block; line-height: 42px; text-align: center; font-weight: 700; color: #fff; background: #ff750d; border-radius: 2px; }

/*推薦碼*/
.inputCode { padding: 18px 24px; text-align: center; border: solid 1px #c9c9c9; border-radius: 2px; }
.inputCode h4 { margin-bottom: 15px; }
.inputCode input { margin-bottom: 15px; text-align: center; }

.myCode { padding: 24px 18px 36px; text-align: center; background: #84b0dd; border-radius: 2px; }
.myCode h4 { margin-bottom: 20px; color: #fff; }
.myCode p { line-height: 42px; font-size: 20px; font-weight: 700; color: #2c3e50; background: #fff; }

.sandCode {  }
.sandCode p { font-size: 15px; margin-bottom: 10px; }
.sandCode .share { display: flex; justify-content: space-around; }
.sandCode .share a { display: block; width: 60px; height: 60px; margin: 0 5px; }
.sandCode .share a:nth-child(1) { margin-left: 0; }
.sandCode .share a:nth-last-child(1) { margin-right: 0; }
.sandCode .share .icon01 { background: url(../images/btn_share_01.png) center no-repeat; background-size: 100%; }
.sandCode .share .icon02 { background: url(../images/btn_share_02.png) center no-repeat; background-size: 100%; }
.sandCode .share .icon03 { background: url(../images/btn_share_03.png) center no-repeat; background-size: 100%; }
.sandCode .share .icon04 { background: url(../images/btn_share_04.png) center no-repeat; background-size: 100%; }
.sandCode .share .icon05 { background: url(../images/btn_share_05.png) center no-repeat; background-size: 100%; }

/*popup*/
.popup { display: none; }
.popup.openPop { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;  background: rgba(0,0,0,0.6); z-index: 1000; }
.popup_area { width: 740px; max-width: calc(100% - 40px); margin: 120px auto 60px; padding: 32px 20px; line-height: 150%; background: #fff; z-index: 1001;	border-radius: 4px; }
.popup_area h2 { margin-bottom: 10px; text-align: center; }

.red {color:red}

@media screen and (max-width: 374px) {

	/*任務步驟*/
	.stepList_inner { font-size: 14px; }

	.giftArea { padding-left: 56px; padding-right: 5px; font-size: 14px; }
}