* {
	box-sizing: border-box;
	font-size: 19px;
	font-family: 'Georgia', '微軟正黑體';
}
*, *:focus{
  outline: 0;
}
ul, ol {
	list-style-type: none;
	padding: unset;
}

input, select, .typeArea{
	border: 1px solid #CCC;
  margin: 0px 0 0 0;
  padding: 3px 5px;
  color: #636363;
  height: 36px;
  background-color: #FFF;
}

/* 單一頁面 */
section {
	height:100vh;
	padding: 10vh 20vh 6vh;
  background: url(../image/pattern);
  background-color: #96DDCB;
}
section > div{
	height: 100%;
}

.pageContent {
  min-height: calc(100vh - 20vh);
  padding: 3vh;
  background-color: #FFF;
  border-radius: 1vh;
	position: relative;
}

.pageTitle {
  text-align: center;
  color: #6a69a7;
  letter-spacing: 1px;
}

.pageSecTitle {
  width: fit-content;
  position: absolute;
  left: -1.5vh;
}
.pageSecTitle h2 {
  font-size: 1.4em;
  font-weight: 400;
  color: #FFF;
  position: relative;
  padding: 15px 20px;
  background: #6a69a7;
  letter-spacing: 5px;
  font-weight: bold;
}
.pageSecTitle h2::before,.pageSecTitle h2::after{
  content: "";
  position:absolute;
  right: -40px;
  border: 20px solid #6a69a7;
}
.pageSecTitle h2::before{
  top: 0;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.pageSecTitle h2::after{
  bottom: 0;
  border-right: 20px solid transparent;
  border-top: 20px solid transparent;
}

/* 操作步驟 */
.stepTitle {
	display: flex;
	align-items: center;
}
.stepTitle h3{
	font-size: 1.2rem;
}
.stepTitle > div {
	position: relative;
  width: 60px;
  height: 60px;
	padding: 0.5vh 1vh;
	margin: 1vh;
	text-align: center;
	color: #FFF;
	font-size: 0.8em;
	border-radius: 50%;
	background-color: #FDB94B;
}
.stepTitle > div > i{
	font-size: 2rem;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.stepTitle > div > span {
  display: block;
	font-size: 1.6rem;
	margin-top: -5px;
}
.stepBlock {
	padding: 1.5vh 3vh;
	border-left:1px solid #AAA;
}

.contestDetailArea{
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #30313345;
  height: 40vh;
  padding: 5vh;
  overflow: auto;
  /* margin: 3vh; */
}

.groupList, .infoList {
	margin: 0;
}
.groupList > li > *{
	margin: 1vh;
}
.groupList > li > *:first-child {
  width: 25%;
}
.groupList > li > *:nth-child(2) {
  width: 70%;
}
.groupList > li > *:nth-child(3){
  width: 5%;
  min-width: 5%;
}
.groupList > li:first-child > span{
	font-size: 1.1rem;
	font-weight: bold;
}

.infoList > li{
	margin-bottom: 3vh;
	align-items: center;
	align-items: flex-start;
}
.groupList > li, .infoList > li{
	font-size: 1.1rem;
	display: flex;
}
.infoList > li > span:first-child{
  font-size: 1.1rem;
	font-weight: bold;
  text-align: right;
  padding: 0 1.5vh;
  width: 20vh;
	min-width: 25%;
}


/* 提示訊息 */
.tips{
	font-size: 0.9rem;
  color: #666;
	margin: 1vh 0;
}
.tips i{
  margin: 0 5px;
}

/* 頁籤切換 */
.pageMarkSelector > ul {
	margin: 0;
	width: 100%;
  border-bottom: 1px solid #AAA;
}
.pageMarkSelector > ul> li {
	font-size: 1.2rem;
	cursor: pointer;
	padding: 1.5vh 5vh ;
	color: #AAA;
}
.pageMarkSelector > ul> li.activeMark{
	color: #000;
	border-bottom: 5px solid #3ab5b0;

	/* position: relative; */
}

/* 按鈕 */
.btn {
  font-size: 20px;
  text-align: center;
  background-size: 200% auto;
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 5px rgb(0 0 0 / 24%);
  border-radius: 0px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
  border: 0;
	display: flex;
  justify-content: space-around;
  padding: 1.5vh 2vh;
  margin: 10px auto;
}
.btn:hover{
	box-shadow: 1px 2px 3px rgb(0 0 0 / 12%), 3px 3px 5px rgb(0 0 0 / 24%);
}
.btn i{
	margin-left: 3vh;
	font-size: 1.2rem;
}
.btn_circle{
	font-size: 20px;
  text-align: center;
  background-size: 200% auto;
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 5px rgb(0 0 0 / 24%);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
  border: 0;
	display: flex;
  justify-content: space-around;
  margin: 0 10px;
	position: absolute;
}
.btn_circle i{
	font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ModalBoxDetailTitle i {
    font-size: 5rem;
}
.ModalBoxDetailBigButton .btn, .ModalBoxDetailButton .btn {
    padding: 0.8vh 3vh;
}

/* 區塊提示訊息 */
.successMsg, div.successMsg {
  text-align: center;
  font-size: 1.5rem;
  color:#52734d;
  background-color: #d2e69c;
  padding: 1.5vh;
  margin: 1vh;
}
.failedMsg, div.failedMsg {
  text-align: center;
  font-size: 1.5rem;
  color: #BE0000;
  background-color: #FFAAA7;
  padding: 1.5vh;
  margin: 1vh;
}
.warningMsg, div.warningMsg{
  text-align: center;
  font-size: 1.5rem;
  color: #A35709;
  background-color: #FAD586;
  padding: 1.5vh;
  margin: 1vh;
}
.successMsg i, .failedMsg i, .warningMsg i{
  margin-right: 1vh;
  font-size: 1.5rem;
}

/* 顏色 */
.bg_red2yellow{
	background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}
.bg_yellow2orange{
	color: #000;
	background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.bg_lightGreen{
	color: #000;
	background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
}
.bg_green2Blue{
	color: #FFF;
	background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
}
.bg_darkblue2light{
	color: #FFF;
	background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}

.btn_sure {
	color:#FFF;
	background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
}
.btn_cancel{
	color:#FFF;
	background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.c_red {
  color: #ac0d0d;
}
.c_green {
	color: #52734d;
}
.c_yellow {
  color: #FDB94B;
}

@media screen and (max-width: 1280px){
  section {
		padding: 10vh 5vh 6vh;
	}
}
@media screen and (max-width: 768px){
	.groupList > li, .infoList > li {
	    flex-wrap: wrap;
	}
	.groupList li span, .infoList li span:first-child {
	    width:5vh;
	}
	.groupList > li > *:first-child {
	  width: calc(25% - 2vh);
	}
	.groupList > li > *:nth-child(2) {
	  width: calc(70% - 2vh);
	}
	.groupList > li > *:nth-child(3){
	  width: calc(5% - 2vh);
	  min-width: calc(5% - 2vh);
	}
	.stepBlock {
		margin:0 auto;
		border: 0;
	}
}

@media screen and (max-width: 414px){
	section {
		padding: 10vh 1.5vh;
	}
	.pageContent{
		padding: 1.5vh;
	}
  .stepTitle {
		display: unset;
	}

  .infoList > li {
  	display: inherit;
		text-align: center;
	}

	.groupList > li> span, .infoList > li> span {
  	display: block;

	}
	.groupList li span, .infoList li span:first-child {
	  width:auto;
		margin-bottom: 1vh;
		text-align: center;
	}
	.groupList > li:first-child > span{
		width: auto;
	}
  #signUpGroupList li{
		display: inherit;
	}
	#signUpGroupList li >*{
		width: 100%;
	}

}