@charset "utf-8";
/* CSS Document */


/*-----↓↓↓↓↓-----share-----↓↓↓↓↓-----*/


html, body, section, div, p{
	padding: 0;
	margin: 0;
	color: #363636;
	font-family: "Noto Sans TC", sans-serif;
	font-size: 1rem;
}

h2{
	font-size: 2.5rem;
	font-weight: 700;
	color: #3CB7C8;
}

h3{
	font-size: 1.5rem;
	color: #363636;
}

h4{
	color: #216098;
	font-size: 1.2rem;
	line-height: 150%;
		
}

a{
	color: #00A0D2;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 16;
	color: #2CBC9B;
}

.modal-content{
	background: #1E1E1E;
}

.modal-body{
	padding: 12px;
}

.modal-footer{
	border-top: 0;
	margin: auto;
	padding: 0 0 .5rem 0;
}

.btn{
	width: 120px;
}

/*-----↓↓↓↓↓-----landing-----↓↓↓↓↓-----*/

#open h1{
	position: absolute;
	top: 20%;
	left: calc(50vw - 660px);
	font-size: 4rem;
	font-weight: 700;
	color: #FFF;
	z-index: 500;
	background: #24DACE;
	padding: 1rem 5rem 1rem 1rem;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;  
	border: 0 none; 
}

#nav_lg{
	background: #339999;
	font-size: 1.2rem;
	padding: 1rem;
	position: absolute;
	z-index: 600;
	top: calc(20% + 109px);
	left: calc(50vw - 660px);
}

#nav_lg a{
	color: #FFF;
	text-decoration: none;
	margin-right: 1rem;
}


@media (min-width:767){	

}

@media (max-width:1200px){
#open h1, #nav_lg{
	left: 0;
	}	

}



/*-----↓↓↓↓↓-----新鮮人完全攻略-----↓↓↓↓↓-----*/
#tips{
	background: url("../images/tipsBG.png");
}

#tips ol li{
	list-style: none;
	line-height: 200%;
	font-size: 1.1rem;
	font-weight: 400;
	list-style-image: url("../images/tipsLi.png");
}

#tips ol li a{
	text-decoration: none;
	position: relative;
	top: -5px;
	left: 0px;
	transition-duration: .5s;
}

#tips ol li a:hover{
	left: 15px;
	transition-duration: .2s;
}

/*-----↓↓↓↓↓-----網路報到流程說明-----↓↓↓↓↓-----*/
#steps{
	background: #F8F8F8;
	background-image: url("../images/stepBGleft.png"), url("../images/stepBGright.png"), linear-gradient(to right, #F8F8F8,#F8F8F8);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:
    top left,
    bottom right,
    right;
}

#steps h2{
	background: #F8F8F8;
}

.card{
	background: #FFF;
	box-shadow: 3px 3px 3px #00000018;
	border-radius: 5px;
	width: 100%;
	min-height: 250px;
	margin-bottom: 1.5rem;
	position: relative;
	top: 0;
	transition-duration: .5s;
}

.card:hover{
	box-shadow: 8px 8px 8px #00000008;
	top: -8px;
	transition-duration: .2s;
}

.cardInfor{
	background: #F2F9FF;
	padding: 1rem;
	margin-bottom: 1rem;
	text-align: center;
}

#checkNo.card{
	position: fixed;
	right: 1rem;
	top: auto;
	bottom: 1rem !important;
	width: 300px;
	padding: 1rem;
	min-height: 100px;
	z-index: 1500;
}

#checkNo.card div:nth-of-type(1){
	width: 20%;
	top: -3rem;
	position: absolute;
	left: 38%;
	}	

@media (max-width:480px){
.card{
	min-height: 150px;
	}

#checkNo.card{
	left: 12px;
	right: 12px;
	top: auto;
	bottom: 0px !important;
	width: calc(100% - 24px);
	padding: 1rem;
	margin-bottom: 12px;
	min-height: 100px;
	z-index: 10;
	
	}

#checkNo.card div:nth-of-type(1){
	width: 15%;
	top: -2.5rem;
	left: 45%;
	}	
	
}


/*-----↓↓↓↓↓-----新生系列活動-----↓↓↓↓↓-----*/
#allEvents{
	min-height: 500px;
}

.eventInfor{
	text-align: center;
	font-size: 1.2rem;
	color: #600;
}

#allEvents p span{
	color: #003366;
	font-size: 1.2rem;
	display: block;
}

#allEvents p a{
	text-decoration: none;
}

#allEvents img{
	animation: fade-in linear;
	animation-timeline: view();
	animation-range-start: cover;
	animation-range-end: contain 100px;
}

@keyframes fade-in{
	from{ scale:.8; opacity: 0;}
	to{ scale:1; opacity: 1;}
}



/*-----↓↓↓↓↓------footer------↓↓↓↓↓-----*/

#footer .footerTXT{
	color:#888;
	font-size:1rem;
	font-family:"微軟正黑體";
	letter-spacing:0.12rem;
	line-height: 130%;
	}


/*-----↓↓↓↓↓------allModals------↓↓↓↓↓-----*/
.modal.fade iframe{
	width: 100%;
	height: 82vh;
}