/*========== common04.首頁 ==========*/
/*========== module01.國家介紹 ==========*/
/*========== module02.最新公告 ==========*/
/*========== module03.環境介紹(文章模組) ==========*/
/*========== module04.地理介紹(文章模組) ==========*/
/*========== module05.開發案(關於我們模組) ==========*/
/*========== module06.聯絡我們 ==========*/
/*========== module07.申請加入 ==========*/




/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== common04.首頁 ==========*/

/*###### cmn04- 輪播*/
.slide-banner{ position:relative; z-index:5; background:#fff; overflow:hidden; }
.slide-banner .item{ }
.slide-banner .item img{ display:block; max-width:100%; height:auto; }

.slide-banner .slick-prev , .slide-banner .slick-next{
	position:absolute;
	z-index:11;
	top:50%;
	display:block;
	width:40px;
	height:40px;
	margin-top:-20px;
	background:transparent;
	font-size:0;
	color:transparent;
	border:none;
	cursor:pointer;

	-webkit-transition: opacity 0.7s ease , transform 0.7s ease;
	transition: opacity 0.7s ease , transform 0.7s ease;
}
.slide-banner .slick-prev{
	left:15px;
}
.slide-banner .slick-next{
	right:15px;
}


.slide-banner .slick-prev:before , .slide-banner .slick-next:before{
	position:absolute;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin-top:-6px;
	margin-left:-6px;
	content:"";
	border-style:solid;
	border-color:#fff;
	border-width:0;
	border-width:4px;
	
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

.slide-banner .slick-prev:before{ border-top-width:0; border-right-width:0; }
.slide-banner .slick-next:before{ border-left-width:0; border-bottom-width:0; }

.slide-banner .slick-prev:hover:before , .slide-banner .slick-next:hover:before{ border-color:#7B5E7F; }


.slide-banner .slick-dots{
	position:absolute;
	bottom:10px;
	left:0;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.slide-banner .slick-dots li{ margin:5px; }
.slide-banner .slick-dots li button{
	font-size:0;
	width:14px;
	height:14px;
	border-radius:50%;
	border-width:0px;
	background:#fff;
	border:1px solid #333;
	cursor:pointer;
	/*opacity:0.5;*/
}
.slide-banner .slick-dots li button:hover{ background:#333; }
.slide-banner .slick-dots li.slick-active button{ opacity:1; background:#00c6c8; border-color:#00c6c8; }





/*###### cmn04- 關於國家*/
.idx-about{ position:relative; background:#fff; min-height:800px; padding:40px 0 50px 0; }
.idx-about:before{
	position:absolute; top:0; left:0; width:100%; height:100%;
	content:"";
	background:url(../images/web-05.png) no-repeat center top;
	background-size:100% auto;
}
.idx-about .inner-area{ position:relative; z-index:5; }


/*###### cmn04- 環境 地理 開發案*/
.idx-loaction{
	position:relative;
	min-height:500px;
	background:linear-gradient(top,#33A5DB , #233056 );
	background:-moz-linear-gradient(top,#33A5DB , #233056 );
	background:-webkit-linear-gradient(top,#33A5DB , #233056 );
	background:-o-linear-gradient(top,#33A5DB , #233056 );
	background:-ms-linear-gradient(top,#33A5DB , #233056 );
	padding:50px 0 350px 0;
}
.idx-loaction:before{
	position:absolute; top:0; left:0; width:100%; height:150px;
	content:"";
	background:#fff;
}
.idx-loaction:after{
	position:absolute; top:150px; left:50%; width:1920px; height:400px;
	content:"";
	/*margin-top:-250px;*/
	margin-left:-960px;
	background:url(../images/web-06.png) no-repeat center top;
	background-size:100% auto;
}
.idx-loaction .inner-area{ position:relative; z-index:5; }

.idx-location-list{ display:flex; flex-wrap:wrap; justify-content:center; }
.idx-location-list li{ width:30%; margin:0 1%; }
.idx-location-list li:nth-child(2){ padding-top:120px; }
.idx-location-list li:nth-child(3){ padding-top:60px; }

.idx-location-card{
	transition:transform 0.3s ease;
	-webkit-transition:transform 0.3s ease;
	-moz-transition:transform 0.3s ease;
	-o-transition:transform 0.3s ease;
}
.idx-location-card img{ display:block; max-width:100%; height:auto; }
.idx-location-card:hover{
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
}





/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module01.國家介紹 ==========*/






/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module02.最新公告 ==========*/
.news-card{
	background:#fff url(../images/web-10.png) no-repeat bottom right;
	background-size:contain;
	border:1px solid #fff;
	padding:15px 20px;
	
	transition:box-shadow 0.3s ease, transform 0.3s ease;
}

.news-card .card-flex{ display: flex; flex-wrap: wrap; margin: 0 -15px; }
.news-card .card-flex > .flex-left , .news-card .card-flex > .flex-right{ padding:0 15px; }
.news-card .card-flex > .flex-left{ width: calc( 100% / 5 * 1 ); }
.news-card .card-flex > .flex-right{ width: calc( 100% / 5 * 4 ); }

.news-card .card-date{}
.news-card .card-date .text{ font-size:12px; font-weight:600; }

.news-card .card-name{ margin:10px 0 10px 0; }
.news-card .card-name .text{}

.news-card .card-text{
	margin-bottom:15px;
	color:#666;
	
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow:hidden;
	-webkit-line-clamp:2;
	-webkit-box-orient: vertical;
	white-space: normal;
}

.news-card:hover{
	box-shadow:4px 4px 6px rgba(0,0,0,0.3);
	transform:translateY(-5px);
}
.news-card:hover .card-name .text{ color:#F4933B; }







/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module03.環境介紹(文章模組) ==========*/
.article-card{
	background:#fff;
	
	transition:box-shadow 0.3s ease, transform 0.3s ease;
}

.article-card .card-photo-frame .item-thumb-frame .item-thumb{ padding-bottom:80%; }

.article-card .card-inner{ padding:15px; }

.article-card .card-name{ margin:0 0 0 0; text-align:center; }
.article-card .card-name .text{ display:block; }

.article-card .card-text{
	margin-bottom:15px;
	color:#666;
	min-height:50px;
	
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow:hidden;
	-webkit-line-clamp:2;
	-webkit-box-orient: vertical;
	white-space: normal;
}

.article-card:hover{
	box-shadow:4px 4px 6px rgba(0,0,0,0.3);
	transform:translateY(-5px);
}

.article-card:hover .card-name .text{ color:#F4933B; }




/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module04.地理介紹(文章模組) ==========*/




/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module05.開發案(關於我們模組) ==========*/





/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module06.聯絡我們 ==========*/
.contact-map{ width:100%; height:300px; margin:45px 0; border:10px solid #fff; }
.contact-map iframe{ width: 100%; height:100%; }

.contact-info-flex{ display: flex; flex-wrap: wrap; }
.contact-info-flex .flex-left{ width:50%; }
.contact-info-flex .flex-right{ width:50%; }

.contact-info-note{ font-size:28px; color:#233056; }

.social-list{ display: flex; flex-wrap: wrap; margin-top:20px; }
.social-list li{ margin:10px 10px 10px 0; }

.social-item{ position:relative; display:inline-block; }
.social-item a{ display:inline-block; }
.social-item .iconfont{
	display:block;
	width:50px; height:50px;
	background:#3B8EAA url(../images/web-04.png) no-repeat center;
	background-size:cover;
	border-radius:50%;
	color:#fff;
	font-size:30px; line-height:50px;
	text-align:center;
	margin:10px auto;
}
.social-item a:hover .iconfont{ background-color:#F4933B; }




.contact-info-list li{ margin-bottom:20px; }
.contact-info-item{}

.contact-info-item .contact-info-subject{ position:relative; display:inline-block; border-bottom:1px solid #233056; margin-bottom:5px; line-height:1; }
.contact-info-item .contact-info-subject .iconfont , .contact-info-item .contact-info-subject .text{
	display:inline-block;
	vertical-align:text-bottom;
	color:#233056;
}
.contact-info-item .contact-info-subject .iconfont{ font-size:36px; }
.contact-info-item .contact-info-subject .text{ font-size:20px; padding-bottom:5px; }

.contact-info-item .detail{ display:block; font-size:20px; font-weight:600;  }
.contact-info-item .detail , .contact-info-item .detail a{ color:#3A95B3; }
.contact-info-item .detail a:hover{ color:#F4933B; }





.contact-form-area{ margin-bottom:60px; }
.contact-form-list{ display:flex; flex-wrap:wrap; }
.contact-form-list > li{ margin-bottom:25px; width:48%; margin-right:4%; }
.contact-form-list > li:nth-child(2n){ margin-right:0; } 
.contact-form-list > li.full-width{ width:100%; margin-right:0; }

.contact-form-note{ color:#333; margin-bottom:20px; text-align:center; padding:0 20px; }

.contact-require-note{ font-size:0.8em; color:#666; margin-bottom:8px; text-align:right; padding:0 20px; }


.contact-form-area .require-mark{ display:inline-block; width:8px; color:red; font-size:0.85em; }



.form-bar{ display:flex; flex-wrap:wrap; width:100%;}
.form-bar .form-bar-left{ width:95px; }
.form-bar .form-bar-right{ width:calc( 100% - 95px); }

.contact-form-note{ color:#333; font-size:18px; margin-bottom:20px; text-align:center; }

.form-require-note{ font-size:0.8em; color:#666; margin-bottom:8px; text-align:right; }

.form-bar label{ text-align:left; }
.form-bar .icon{
	display:inline-block;
	vertical-align:middle;
	width:26px;
	background:#7f7f7f;
	padding:2px;
	margin-right:2px;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.form-bar .icon img{ display:block; max-width:100%; height:auto; }
.form-bar .title{ display:inline-block; vertical-align:middle; color:#233056; font-size:16px; font-weight:600; padding-top:6px; }

.form-bar input[type=text] , .form-bar textarea{
	width: 100%;
    display: block;
	border:1px solid #e6f7ff;
	background:#e6f7ff;
	color:#333;
	padding:7px 15px;
	font-size:16px;
}
.form-bar textarea{ padding-top:15px; padding-bottom:15px; }

.form-bar input[type=text]::-webkit-input-placeholder , 
.form-bar textarea::-webkit-input-placeholder{ color:rgba(35,48,86,0.6); font-size:1em;}

.form-bar input[type=text]::-moz-placeholder ,  
.form-bar textarea::-moz-placeholder { color:rgba(35,48,86,0.6); font-size:1em;}

.form-bar input[type=text]::-ms-input-placeholder ,  
.form-bar textarea::-ms-input-placeholder { color:rgba(35,48,86,0.6); font-size:1em;}

.form-bar input[type=text]::-moz-placeholder , 
.form-bar textarea::-moz-placeholder { color:rgba(35,48,86,0.6); font-size:1em;}



.form-btn-line{ width:100%; text-align:center; margin-top:15px; }
.fbtn-confirm{
	position:relative;
	display:inline-block;
	z-index:1;
	padding:8px 20px;
	color:#fff;
	background:#3A95B3;
	font-weight:600;
	font-size:16px;
	cursor:pointer;
	border:2px solid #fff;

}
.fbtn-confirm:hover{ background:#F4933B; color:#fff; }

.form-btn-line.full-width .fbtn-confirm{
	display:block;
	width:100%;
	border-radius:1px;
}










/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module07.申請加入 join ==========*/

.card-join{
	height:100%;
	
	background:#fff url(../images/web-10.png) no-repeat bottom right;
	background-size:contain;
	
	border-radius:20px;
	text-align:center;
	transition:transform 0.5s ease, box-shadow 0.5s ease;
}
.card-join a{
	display:block;
	height:100%;
	padding:40px 20px;
}
.card-join:hover{
	transform:scale(1.1);
	box-shadow:2px 2px 5px rgba(0,0,0,0.1);
}

.card-join .card-name{
	font-size:1.3rem; font-weight:600;
	margin-bottom:30px;
}
.card-join.normal .card-name{ color:#639c9a; }
.card-join.residency .card-name{ color:#3db751; }
.card-join.citizen .card-name{ color:#e98f39; }


.card-join .card-text{
	color:#666;
	font-size:0.875rem;
	margin-bottom:5px;
}






.regist-form-area{max-width:900px; margin:0 auto; }

.leading-article{ font-size:20px; font-weight:600; margin-bottom:45px; }

.regist-tab{ margin:0 auto 20px auto; background:#E6F7FF; padding:30px 30px 15px 30px; }

.last-article{ font-size:18px; font-weight:600; margin-bottom:15px; }



.tab-heading{ position:relative; margin-bottom:15px; }

.tab-heading .serial-num{
	position:absolute;
	top:-30px;
	left:-30px;
	width:26px;
	height:26px;
	background:#dbedf5;
	/*border:1px solid #E6F7FF;*/
	color:#747e9e;
	line-height:26px;
	text-align:center;
	font-size:12px;
	letter-spacing:0;
}
.tab-heading .text{ font-size:18px; font-weight:600; }
.note-text{ font-size:14px; color:#233056; }
.tab-heading .require-mark{ margin:0 5px; color:red; font-size:20px; }


.tab-heading + .note-text{ margin-top:-15px; margin-bottom:15px; }




.chinese-text{ font-size:16px; font-weight:600; }
.tab-heading + .chinese-text{ margin-top:-15px; margin-bottom:15px; }




.regist-form-area .regist-tab input , .regist-form-area .regist-tab textarea{
	width:100%;
	background-color:transparent;
	border:1px solid transparent;
	border-bottom:1px solid #9db1bc;
	font-size:16px;
	font-weight:600;
	color:#333;
	padding:7px 7px;
	margin-bottom:15px;
}
.regist-form-area .regist-tab textarea{ border-color:#9db1bc; }

.regist-form-area .regist-tab input::placeholder , .regist-form-area .regist-tab textarea::placeholder{ color:#999; }





/*單選*/
.choose-box{ display: flex; flex-wrap: wrap; }
.choose-item{ width:49%; margin-right:2%; position:relative; margin-bottom:15px; }
.choose-item:nth-child(2n){ margin-right:0; }

.choose-box.full-width .choose-item{ width:100%; margin-right:0; }


.choose-item input[type="radio"] , .choose-item input[type="checkbox"] { display:none; }
.choose-item input ~ label{ cursor:pointer; }

.choose-mark{ position: absolute; z-index:5; top:14px; left: 10px; /*margin-top:-8px;*/ }
.checkmark{
	display:block;
	position:relative;
	width: 16px; height: 16px; 
	background-color: #9db1bc;
	border-radius: 50%;
}
.checkmark.square{
	border-radius: 4px;
}
.checkmark:after {
	position: absolute; top: 3px; left: 3px; content: "";
	width: 10px; height: 10px;
	background: white;
	border-radius: 50%;
	opacity:0;
}
.checkmark.square:after{
	border-radius: 2px;
}

.choose-item.checkbox .checkmark{ border-radius: 4px; }
.choose-item.checkbox .checkmark:after { border-radius: 1px; }

.choose-tick{ position: absolute; z-index:5; top: 10px; right: 10px; /*margin-top:-12px;*/ opacity:0; }
.choose-tick .iconfont{ font-size:18px; color: #2196F3; }

.choose-text{ display:block; width:100%; border:1px solid #9db1bc; /*background:rgba(0,0,0,0.05);*/ border-radius:5px; padding:7px 45px 7px 36px; }
.choose-text .text{ display:block; font-size: 16px; font-weight:600; color:#444; }

.choose-item input:hover ~ .choose-mark .checkmark{ background-color: #ccc; }
.choose-item input:checked ~ .choose-mark .checkmark{ background-color: #2196F3; }
.choose-item input:checked ~ .choose-mark .checkmark:after{ opacity:1; }

.choose-item input:checked ~ .choose-tick{ opacity:1; }

.choose-item input:checked ~ .choose-text{ background:rgba(255,255,255,0.5); /*background:transparent;*/  border-color: #2196F3; }
.choose-item input:checked ~ .choose-text .text{ color:#000; }


.regist-confirm{
	position:relative;
	display:inline-block;
	z-index:1;
	background-color:#3A95B3;
	border:2px solid #fff; border-radius:30px;
	color:#fff;
	font-size:22px; font-weight:600;
	padding:8px 30px;
	margin-top:30px;
	cursor:pointer;
}
.regist-confirm:hover{ background:#F4933B; color:#fff; }






/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== module08.相關連結 linke ==========*/
.link-card{
	transition: transform 0.3s ease;
}
.link-card .card-name{
	text-align:center;
	margin:5px 0;
}
.link-card .card-name .text{
	font-size:0.875rem;
}

.link-card .card-photo{
	border:1px solid #fff;
	border-radius:5px;
	overflow:hidden;
	
	transition:box-shadow 0.3s ease;
}

.link-card:hover .card-photo{
	box-shadow:3px 3px 5px rgba(0,0,0,0.3);
}

.link-card:hover{
	transform:translateY(-5px);
}