@charset "UTF-8";

/*header
.headerMenu .headerLink { color: #c9c9c9; }
.headerMenu .headerLink:hover,
.headerMenu .headerLink.on { color: #fff; }*/

/*area_banner*/
.area_banner { background: #0e1f37; }
.area_banner { height: 600px; position: relative; }
.area_banner img { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
.area_banner .swiper-pagination { bottom: 25px; }
.area_banner .swiper-pagination-bullets .swiper-pagination-bullet { width: 12px; height: 12px; margin: 0 10px; background: #fff; }
.area_banner .swiper-pagination-bullets .swiper-pagination-bullet-active { background: #0482df; }
.bannerBox { position: relative; }
.bannerBox img { position: relative; transform: translate(0, 0); }
.bannerText { position: absolute; top: 260px; left: 0; width: 100%; text-align: center; color: #fff; }
.bannerText h2 { margin: 20px 0; font-size: 60px; line-height: 1.2em; }
.bannerText p { font-size: 30px; color: #ccc; }

/*成員類別*/
.area_memeber { height: 350px; padding: 90px 0; background: #fff url(../images/bg_index_member_02.png) center no-repeat; background-size: cover; }
.area_memeber h2.title{margin-bottom: 30px; font-size: 36px; text-align: center;}
.memeberBox { position: relative; padding: 0 40px;}
.memeberList {  }
.memeberList li a { display: block; text-align: center; }
.memeberList li img { width: 50px; margin: 0 0 10px; }
.memeberList .swiper-slide {}
.memeberBox .swiper-button-prev { left: 0; background: url(../images/btn_prev_01.png) center no-repeat; background-size: auto 100%; }
.memeberBox .swiper-button-next { right: 0; background: url(../images/btn_next_01.png) center no-repeat; background-size: auto 100%; }

/*介紹*/
.area_intro { height: 400px; padding: 60px 0; color: #fff; background: url(../images/img_index_intro_02.jpg) center no-repeat; background-size: cover; }
.area_intro h2.title{margin-bottom: 30px; font-size: 30px; text-align: center;}
.area_intro p { text-align: center; font-size: 18px; line-height: 30px; }

/*消息*/
.area_news { min-height: 400px; padding: 45px 0 30px; background: #fff url(../images/bg_index_timeline.jpg) right top no-repeat; }
.newsBox { padding: 0 0 20px; }
.newsBox .swiper-pagination { bottom: 0; }
.newsBox .swiper-pagination-bullet { width: 40px; height: 4px; border-radius: 0; background: #666; opacity: 1; }
.newsBox .swiper-pagination-bullet-active { background: #0382df; }
.newsBox h3 { margin-bottom: 10px; font-size: 21px; font-weight: bold; color: #0382df; }
.newsBox p { max-height: 75px; overflow: hidden; line-height: 25px; color: #1b1b1b; }
.newsBox .newsImg { display: block; margin-bottom: 20px; }
.newsBox .newsImg img { width:100%; }


/*流程1*/
.area_steps { padding: 30px 0px 10px 0px; color: #fff; background: url(../images/img_index_steps_01.jpg) center top no-repeat; background-size: cover; }
.area_steps h2.title{margin-bottom: 30px; text-align: center; font-size: 24px; color: #ffffff;}
.area_steps p.name {text-align: center; font-size: 24px; color: #ffffff; }

/*流程2*/
.area_steps_2 {  min-height: 300px; padding: 45px 0 30px; background: #fff url(../images/bg_index_timeline.jpg) right top no-repeat; }
.area_steps_2 h1 { margin-bottom: 30px; text-align: center; font-size: 24px; color: #00bfff; }
.area_steps_2 .title{ margin-bottom: 30px; text-align: center; font-size: 24px; color: #00bfff;}

.stepList { display: flex; justify-content: space-between;gap: 30px; }
.stepList .stepBox { flex: 0 0 150px; text-align: center; }
.stepList .stepBox span { display: block; font-size: 18px; line-height: 1.3em;  }
.stepList .step_icon { margin: 0 auto 10px; width: 30px; height: 30px;}
.stepList .step_icon.icon01 { background: url(../images/icon_index_steps_01_black.png) center no-repeat; background-size: 100%; }
.stepList .step_icon.icon02 { background: url(../images/icon_index_steps_02_black.png) center no-repeat; background-size: 100%; }
.stepList .step_icon.icon03 { background: url(../images/icon_index_steps_03_black.png) center no-repeat; background-size: 100%; }
/*
.stepList .line { flex: 1 0 auto; margin: 0 30px; position: relative; background: url(../images/bg_index_step_01_black.png) center repeat-x; }
.stepList .line::before,
.stepList .line::after { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: calc(50% - 5px); left: 0; border-radius: 5px; background: #000; }
.stepList .line::after { left: auto; right: 0; }*/

.stepList .line{position: relative;flex: 1 0 auto; min-height: 44px;}
.stepList .line::before{content: '';background:url(../images/arrow.svg) center no-repeat; background-size: 44px;width: 44px; height: 44px; display: block;  position: absolute; top: 50%; left: 50%; margin-top:-22px; margin-left: -22px;}


@media screen and (max-width: 1200px) {
 
	/*area_banner*/w
	.area_banner {  }
	.area_banner { height: auto; position: relative; }
	.area_banner img { position: static; }
	.bannerText { top: 200px; }
	.bannerText h2 { font-size: 48px; }
	.bannerText p { font-size: 24px; }
}

@media screen and (max-width: 800px) {
	/*
	.header { position: fixed; top: 0; left: 0; border-bottom: none; }
	.header .logo a { background-size: auto 35px; }*/

	/*area_banner*/
	.bannerText { top: 20vw; }
	.bannerText h2 { margin: 10px 0; font-size: 6vw; }
	.bannerText p { font-size: 3.6vw; }

	/*成員類別*/
	.area_memeber { height: auto; padding: 35px 0; background-size: auto 100%; }
	.area_memeber h1 { font-size: 21px; }
	.memeberList {  }
	.memeberBox { padding: 0 30px; }
	.memeberBox .swiper-button-prev ,
	.memeberBox .swiper-button-next { width: 25px; height: 35px; margin-top: -17px; }

	/*介紹*/
	.area_intro { height: auto; min-height: 400px; padding: 35px 0; }
	.area_intro h1 { font-size: 18px; font-weight: bold; margin: 0 0 20px;}
	.area_intro p { /*margin-bottom: 250px;*/ font-size: 16px; }

	/*流程*/
	.area_steps { padding: 20px 0 0; }
	.area_steps p.name{font-size: 16px;}

	
	.stepList { display: block; }
	.stepList > div{margin-bottom: 20px;}
	.stepList .step_icon { width: 25px; height: 25px; margin-bottom: 5px;  }
	.stepList .stepBox span { display: inline; margin: 0; font-size: 16px; line-height: 1.3em; }
.stepList .line::before{transform: rotate(90deg);}

	/*消息*/
	.area_news { min-height: 320px; padding: 30px 0; background-size: auto 100%; }
	.newsBox { padding: 0 0 10px; }
	.newsBox .newsImg { margin-bottom: 10px; }
	.newsBox h3 { font-size: 18px; }
}

/*成員名單20190516*/
.memberList { display: flex; flex-wrap: wrap; padding-bottom:30px ;}
.memberList li { flex: 1 1 20%; text-align: center;  }
.membericon { position: relative; width: 80%; padding-top: 75%; /*width: 170px; height: 170px;*/ margin: 0 auto 20px; vertical-align: middle; background: #a5a5a5; opacity: 0.8; border-radius: 20%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3); }
.membericon a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.membericon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; max-width: 80%; max-height: 80%; }
.memeberbox p { margin: 0; font-size: 12px }
.memeberbox .title { font-size: 15px; color: #444; }