@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@charset "utf-8";

/*default*/
html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth;}
img { max-width: 100%; border: 0;}
img a { outline : none;}
a:focus { outline: 0;}
body {
	width: 100%;
	height: auto;
	margin: 0 auto;
	font-family: 'Noto Serif TC', 'Noto Sans TC', '微軟正黑體', Helvetica, Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	position: relative;
	background: #0c0705;
}
.wrapper {
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	background: url('../images/bg.jpg') top center no-repeat;
}
.wrapper .head_logo {
	position: relative;
	padding: 1% 0 0 1%;
}
.wrapper .head_logo img {
    width: 12%;
}
.sec_wrapper {
	max-width: 1920px;
	width: 1200px;
	margin: 0 auto;
}
.sec_title {
	margin:  0 auto;
	text-align: center;
}
.clear { clear: both;}



/*area1*/
.area1 {
	width: 1000px;
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding: 13% 0 0 0;
}

.area1 .head_logo img { width: 30%;}
.area1 .head_title img { width: 100%;}
.area1 .head_title_m { display: none;}
.area1 .sign {
	width: 100%;
	margin: 0 auto 24% auto;
}
.area1 .sign_time {
	width: 100%;
	position: relative;
	margin-bottom: 3%;
	font-weight: 800;
    letter-spacing: 0.14rem;
    line-height: 3.4rem;
    font-size: 2.4rem;
}
.area1 .sign_time span { color: #ffe395;}
.area1 .sign_time p { color: #fff;}
.area1 .sign_phone {
	width: 72%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}
.area1 input.input-field, 
.area1 .select-field {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 1px solid #C2C2C2;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	padding: 0 18px;
    outline: none;
    font-size: 1.4rem;
    font-weight: 600;
    color: #2b2b2b;
}
.area1 .input-field:focus,
.area1 .select-field:focus {
	border: 1px solid #0C0;
}
.area1 input[type=button] {
	border: #808080 1px solid;
	padding: 8px 15px 8px 15px;
	background: #f6f6f6;
	color: #000;
	margin-right: 20px;
}.area1 input[type=button]:hover {
	border: #212121 1px solid;
}
.area1 .select-field {
	width: 100%;
    height: 54px;
}
.area1 input.input-field{
	width: 100%;
    height: 54px;
	margin-left: 15px;
}
.area1 .sign_warn {
	width: 55.5%;
    float: right;
    color: #ff2525;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Noto Sans TC';
    letter-spacing: 0.06rem;
    margin: 5px auto 3% auto;
    position: relative;
    text-align: left;
}
.area1 .submit {
	margin: 8% auto 0 auto;
	position: relative;
	text-align: center;
	-webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}
.area1 .submit img {
	position: relative;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.area1 .submit img:hover {
	-webkit-filter:brightness(1.5);
	filter: brightness(1.5);
}
@-webkit-keyframes hvr-bob {
  0%,100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
	filter: drop-shadow(0 0 5px #ffbb18);
  }
  50% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
	filter: drop-shadow(0 0 3px #ffbb18);
  }
}
@keyframes hvr-bob {
  0%,100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
	filter: drop-shadow(0 0 5px #ffbb18);
  }
  50% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
	filter: drop-shadow(0 0 3px #ffbb18);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
	filter: drop-shadow(0 0 30px #ffbb18);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
	filter: drop-shadow(0 0 30px #ffbb18);
  }
}


/*area2*/
.area2 {
	width: 100%;
	position: relative;
	margin: 0 auto;
	text-align: center;
	margin-top: -9%;
	margin-bottom: 6%;
}
.area2 ol {
	list-style: decimal;
    text-align: left;
    font-size: 1.2rem;
    font-family: 'Noto Sans TC';
    letter-spacing: 0.1rem;
    width: 100%;
    margin: 0 auto;
    margin-top: 5%;
    margin-left: 3%;
    color: #fff;
    line-height: 2rem;
}
.area2 ol li {
	margin: 3% 0;
}
.area2 .infor_special {
	width: 100%;
	position: relative;
	display: block;
	margin: 3% auto 8% auto;
}
.swiper_content .swiper-container {
	width:100%;
	height: auto;
	margin:0 auto;
	overflow:hidden;
	position:relative
}
.swiper_content .swiper-container .swiper-slide {
	width: 100% !important;
	margin: 0 auto;
	text-align: center;
}
.swiper_content .swiper-container .swiper-button-next {
	right: 0;
	background-image: url('../images/06infor_rightbtn.png');
}
.swiper_content .swiper-container .swiper-button-prev {
	left: 0;
	background-image: url('../images/06infor_leftbtn.png');
}
.swiper_content .swiper-container .swiper-button-next,
.swiper_content .swiper-container .swiper-button-prev {
	display: inline-block;
	position: absolute;
	width: 49px;
	height: 95px;
	background-size: 49px 95px;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.swiper_content .swiper-container .swiper-button-next:hover,
.swiper_content .swiper-container .swiper-button-prev:hover {
	-webkit-filter:brightness(.5);
	filter: brightness(.5);
}




/*footer*/
.footer {
	width: 100%;
	background: #0c0c0c;
	font-family: 'Noto Sans TC', '微軟正黑體';
	font-weight: 300;
	position: relative;
}
.footer_wrapper {
	width: 1200px;
    margin: 0 auto;
    padding: 1.2% 0;
}
.footer .copyright {
	margin: 0 auto;
	display: flex;
    justify-content: center;
    align-items: center;
}
.copyright .logo {
	width: 24%;
}
.copyright .copyright_txt {
	color: #ee4343;
    font-size: 0.4em;
    width: 35%;
    line-height: 3em;
}
.copyright .grade {
	width: 5%;
}
.footer .warning {
	color: #fff;
    font-size: 0.75em;
    margin-top: 15px;
	text-align: center;
    line-height: 2em;
}
.footer .warning a {
	color: #fff;
}
.footer .warning a:hover {
	color: #16f1ff;
}

/*check box*/
.checkbox {
    position: fixed;
    background: #fff;
	left: 32vw;
	right: 32vw;
    top: 40vh;
    padding: 3% 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2b2b2b;
    font-size: 2rem;
    font-family: 'noto sans tc';
    font-weight: 700;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
    -moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
    z-index: 99;
}
.checkbox button.check_btn {
	color: #fff;
	border: 0;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	font-size: 1rem;
	font-weight: 700;
	padding: 10px 20px;
    margin: 5% 1% 0 1%;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.checkbox .confirm { background: #1396ff;}
.checkbox .cancel { background: #e7491f;}
.checkbox .confirm:hover { background: #005293;}
.checkbox .cancel:hover { background: #a22605;}
.checkbox .close_btn {
	position: absolute;
    top: 7%;
    right: 3%;
}


/*formbox*/
.formbox {
	position: fixed;
    background: #fff;
    padding: 3% 2%;
	left: 22vw;
    right: 22vw;
    top: 17vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2b2b2b;
    font-family: 'Noto Sans TC';
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
    -moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
    z-index: 99;
}
.formbox .form_content p {
	font-size: 1.8rem;
    text-align: center;
    font-weight: 700;
    line-height: 2.8rem;
}
.formbox .form_content hr {
	margin: 3% 0;
}
.form_content .f-question ol {
	list-style: decimal;
    margin-left: 2rem;
}
.form_content .f-question ol li { 
	margin: 1% 0;
	line-height: 1.6rem;
}
.form_content .f-question .blue {
	font-weight: 700;
    color: #1396ff;
}
.form_content .f-question input[type=radio] { margin-bottom: 2%;}
.f-question .f-submit {
	text-align: center;
    margin: 4% auto;
}
.f-question .f-submit a {
	background: #1396ff;
    color: #fff;
    padding: 2%;
    position: relative;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 0px 2px #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.f-question .f-submit a:hover { background: #005293;}
.formbox .close_btn {
	position: absolute;
    top: 4%;
    right: 3%;
}



/*----------------------------------------4K---------------------------------------------------*/
@media screen and (min-width:2200px) {
	
	
}
/*----------------------------------------Mac book---------------------------------------------------*/
@media screen and (max-width:1440px) {
	

}
/*----------------------------------------小尺寸筆電---------------------------------------------------*/
@media screen and (max-width:1280px) and (min-width:1025px) {
	
	
	
}
/*----------------------------------------ipad pro-----------------------------------------*/
@media screen and (max-width:1024px) {
	.wrapper {background: url("../images/mobile/mbg.jpg")top center no-repeat;}
	.wrapper { max-width: 100%; width: 100%;}
	.wrapper .head_logo {padding: 56% 0 0 0;text-align: center;}
	.wrapper .head_logo img { width: 38%;}
	.area1 {padding: 0% 0 0 0;}
	.sec_wrapper { width: 100%;}
	.sec_title { width: 60%; margin-top: 1%;}
	.area1, .area2 {margin-top: 0%;}
	.area1 .sign_warn { width: 56%;}
	
	.checkbox { left: 25vw; right: 25vw;}
	
	.formbox { top: 32vh;}
	.formbox .form_content p { font-size: 0.9rem; line-height: 1.4rem;}
	.f-question .f-submit a { font-size: 1.4rem;}
	.form_content .f-question ol { margin-left: 1.5rem;}
	.form_content .f-question ol li { margin: 3% 0;}
	.f-question .f-submit { margin: 6% auto;}
	
	.swiper_content .swiper-container .swiper-button-next { right: 2%; margin-top: -44px;}
	.swiper_content .swiper-container .swiper-button-prev { left: 2%; margin-top: -44px;}
	.area2 .swiper_content { width: 80%; margin: 0 auto;}
	.area2 ol { width: 86%; margin-left: 0; margin: 0 auto; position: relative; left: 3%;}
	
	.footer_wrapper { width: 80%; padding: 5% 0;}
	.copyright .logo { width: 35%;}
	.copyright .copyright_txt { width: 50%;}
	
}
/*----------------------------------------ipad+i10橫版-----------------------------------------*/
@media screen and (max-width:812px) {
	
	.wrapper { background-size: 100%;}
	.sec_title { width: 38%;}
	.area1, .area2 { width: 100%; margin-top:0%;}
	.area1 .sign {  margin: 0 auto 12% auto;}
	.area1 .sign_warn { width: 57.5%;}
	
	.checkbox { left: 20vw; right: 20vw; padding: 5% 2%;}
	
	.formbox { top: 25vh;}
	
	.footer_wrapper { width: 90%;}
	.copyright .logo img { width: 50%;}
	.copyright .copyright_txt { font-size: 12px; width: 60%; line-height: 16px;}
	.footer .warning { font-size: 12px; line-height: 24px;}
	
}
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px) {
	
	.sec_title { width: 54%;}
	.wrapper .head_logo {padding: 68% 0 0 0;text-align: center;}
	.wrapper .head_logo img { width: 40%;}
	.area1 {padding: 0 0 0 0;margin-top: -12%;}
	.area1 .head_title { display: none;}
	.area1 .head_title_m { display: block; margin-top: 11%;}
	.area1 .sign { margin: 1% auto;}
	.area1 .sign {width: 92%;}
	.area1 .sign_time { margin-bottom: 7%; line-height: 2rem; font-size: 1.4rem;}
	.area1 .sign_phone { width: 90%;}
	.area1 .select-field { height: 40px; padding: 0 10px; position: relative; right: 5px;}
	.area1 input.input-field  { margin-left: 5px; height: 40px; padding: 0 23px;}
	.area1 .sign_warn { font-size: 12px; margin: 5px auto 8% auto; padding-right: 4%;}
	.area1 .submit { width: 58%; margin: 10% auto;}
	.area2 ol { font-size: 14px; line-height: 1.8rem;}
	.area1 input.input-field, .area1 .select-field {font-size: 1rem;}
	/*.copyright .logo { display: grid;}*/
	.footer .copyright {
    display:block;
}
	.copyright .logo {
    width: 70%;
    display: inline-block;
}
	.copyright .copyright_txt {  width: 100%; }
	
	.copyright .grade {
    width: 8%;
    display: inline-block;
    vertical-align: 26%;
}
	
	.footer .warning { line-height: 20px;}
	
	.checkbox { font-size: 1rem;}
	.checkbox .close_btn img { width: 50%;}
	
	.formbox { left: 12vw; right: 12vw; top: 16vh; padding: 8% 4% 4% 4%;}
	.form_content .f-question { font-size: 0.8rem;}
	.f-question .f-submit a { font-size: 1rem; padding: 4%;}
	.f-question .f-submit { margin: 10% auto;}
	.formbox .close_btn {  top: 2.4%; right: 4%;}
	.formbox .close_btn img { width: 50%;}
	
	.area2 .infor_special { margin: 6% auto;}
	.area2 .swiper_content { width: 92%;}
	.swiper_content .swiper-container .swiper-button-next,
	.swiper_content .swiper-container .swiper-button-prev { width: 7%; background-size: 100%;}
	
}
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width:320px) {
	
	.area1 .sign_time { letter-spacing: 1px;}
	.checkbox { left: 15vw; right: 15vw; padding: 7% 2%;}
	.formbox { top: 12vh;}
	.formbox .form_content p { font-size: 12px; line-height: 1rem;}
	.form_content .f-question ol li { margin: 1% 0; line-height: 1.2rem;}
	.f-question .f-submit a { font-size: 0.8rem;}
	.formbox .close_btn { right: 0;}
}