body { font-size:18px; color:#0c1e33; text-align: center; font-family: "Arial","微軟正黑體","Microsoft JhengHei", serif; }
img { width:100%; }
html * { max-height: 9999999px; }

a { color:#474747; }
a:hover { text-decoration: none; color:#3553ef; }
a.Type1 { color:#314a5e; }
a.Type1:hover { color:#3553ef; }
a.Type2 { color:#fff; }
a.Type2:hover { color:#3553ef; }
ul,li { list-style-type: none; padding:0; margin:0; }

.mtop { height:110px; }
.mh1 { height:10px; }
.mh2 { height:20px; }
.mh3 { height:30px; }
.mh4 { height:40px; }
.mh5 { height:50px; }
.mh6 { height:60px; }

/* 圖片cover */
.gbox { overflow: hidden; }
.gbox .wh { height:100%; width:auto; }
.gbox .ww { width:100%; height:auto; }

.BaseBD { position: relative; width:100%; }
.Base169 { padding-top:56.25%; }
.Base167 { padding-top:43.75%; }
.Base11 { padding-top:100%; }
.Base83 { padding-top:37.5%; }
.BaseImgS { padding-top:46.85%; }
.BaseArea { position: absolute; top:0px; left:0px; bottom:0px; right:0px; overflow: hidden; }

.linkIcon { display: inline-flex; align-items:center; }
.linkIcon .lineImg1 { display:block; width:16px; height:16px; background:url("./images/ico-line.png") no-repeat center center; background-size:16px; }
.linkIcon .lineImg1:hover { background:url("./images/ico-line-2.png")no-repeat center center; background-size:16px; }
.linkIcon .lineImg2 { display:block; width:18px; height:18px; background:url("./images/ico-line-2.png") no-repeat center center; background-size:18px; }
.linkIcon .lineImg2:hover { background:url("./images/ico-line-2.png")no-repeat center center; background-size:18px; }

/* 標題 */
.UnitTitle { text-align:left; height:64px; display: flex; } /* 單元大標 */
.UnitTitle img { height:100%; width:auto; }
.UnitTitle .txt { padding-left:20px; }
.UnitTitle .txt .tt1 { color:#0c1e33; font-size:0.875rem; line-height: 10px; }
.UnitTitle .txt .tt2 { color:#073190; font-size:2.25rem; line-height:35px; padding-top:19px; white-space:nowrap; }

.nlTitle { color:#073190; font-size:1.875rem; }
.STitle { color:#073190; font-size:1.5rem; }
.Point { color:#f39988; }

/* 表單 */
form { text-align: left; }
form label { color:#073190; }
form input,
form select,
form textarea { width:100%; background-color:#f1f1f1; color:#474747; border:1px solid #c6c6c6; padding:7px 10px; margin-bottom:25px; }
form input.nomb { margin-bottom:0px; }
form textarea { height:140px; resize:none; }
form .security { display: flex; justify-content: space-between; margin-bottom:40px; }
form .security button { border:none; color:#3553ef; background:transparent; margin:7px 0px; }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }

select { background: url("./images/arrow.png") no-repeat center center; background-position:calc(100% - 20px) 50%; -webkit-appearance: none; -moz-appearance: none; } /* select 改變按鈕圖示 */
select::-ms-expand { display: none; } /* ie remove arrow */

::-webkit-input-placeholder{ color:#474747; }

/* 連結 */
.LinkArea1 { display: inline-block; padding:10px 32px; color:#3553ef; border:1px solid #3553ef; border-radius: 25px; background-color:rgb(0,0,0,0); }
.LinkArea1:hover { background-color:#5fc1c7; color:#fff; border:1px solid #5fc1c7; }
.LinkArea1.nobd { border:none; }
.LinkArea1.nobd:hover { color:#7ecef4; background-color:transparent; }
.LinkArea2 { display: inline-block; padding:11px 0px; width:40px; height:40px; border-radius: 25px; border:1px solid #9caeb8; color:#9caeb8; }
.LinkArea2:hover { background-color:#5fc1c7; color:#fff; border:1px solid #5fc1c7; }

.topnb { position: absolute; width:100%; top:0px; padding:20px 120px; display: flex; justify-content: space-between; align-items:center; }
.topnb.active { position: fixed; background:url("./images/bd_topmenu.png")repeat-x center bottom; background-size:100% 4px; background-color:#fff; }
.topnb .logo { width:258px; }
.topnb .bread { padding-right:264px; }
.topnb .blan { display: inline-block; position: relative; }
.topnb .blan:hover .lan { display: block; }
.topnb .lan { display: none; text-align:left; position: absolute; left:-20px; right:-20px; background-color:#e5edf2; padding:20px; }
.topnb .bread .breadcrumb { font-size:0.875rem; background-color:transparent; padding:0px; margin:12px 0px; justify-content: flex-end; }
.breadcrumb-item+.breadcrumb-item { padding-left:0px; }
.breadcrumb-item+.breadcrumb-item::before { padding:0px 1rem; color:#9caeb8; }
.topnb .nb { display: flex; }
.topnb .nb > div { position: relative; }
.topnb .nb > div:hover .dp_menu { display: block; }
.topnb .nb .dp_menu { display: none; position: absolute; top:50px; left:36px; transform:translate(-50%,0px); background-color:#fff; }
.topnb .nb .dp_menu li a { display: block; padding:10px 30px; white-space: nowrap; color:#3553ef; }
.topnb .nb .dp_menu li a:hover { background-color:#d7ddfc; }
.topnb .navitem { margin-right:30px; padding:10px 0px; }
.topnb .LinkArea1 { padding:10px 32px; margin-left:22px; }
.topnb .LinkArea2 { width:48px; height:48px; padding:15px 0px; margin-left:20px; }

.topmenu { position: fixed; display: flex; top:0px; right:-100%; width:100%; height:100vh; background-color:#e9e9e9; overflow-x: hidden; overflow-y:scroll; transition: all .5s ease; }

.topmenu a { color:#0c1e33; }
.topmenu a:hover { color:#3553ef; }
.topmenu::-webkit-scrollbar{ display:none; }

.topmenu .tmheader { display: flex; justify-content: space-between; align-items:center; padding:50px 0px; }
.topmenu .tmheader a.cloz { display: inline-block; width:48px; height:48px; background-color:#fff; border-radius: 25px; padding:15px 0px; }
.topmenu .tmheader a.cloz:hover { background-color:#3553ef; color:#fff; }
.topmenu .tmbody { max-width:700px; width:100%; padding:120px 0px; text-align:left; }
.topmenu .tmbody .menu,.topmenu .tmbody .menu2 { display: flex; justify-content: space-between; }
.topmenu .tmbody .tt {font-size:1.875rem; margin-bottom:10px; }
.topmenu .tmbody a { display: block; margin-bottom:10px; }
.topmenu .tmfooter { text-align:left; }

.totop { position: fixed; right:40px; bottom:40px; width:48px; height:48px; background-color:#3553ef; color:#fff; padding:16px 0px; border-radius:25px; opacity: 0.8; transition:all .5s; }
.totop:hover { opacity: 0.5; cursor: pointer; }

.nodata { padding:80px 0px; color:#919191; text-align:center; }
.nodata .emotion { font-size:6rem; padding-bottom:60px; }
.nodata .ct1 { font-size:1.5rem; padding-bottom:15px; }

.BottomPage { height:80px; border-top:1px solid #e5edf2; border-bottom:1px solid #e5edf2; background-color:#fff; padding:28px 0px; color:#3553ef; }
.BottomPage a { color:#3553ef; }
.BottomPage a:hover { color:#3553ef; }
.BottomPage .backArea { position: relative; }
.BottomPage .backArea a.back { position: absolute; left:0px; top:0px; }

.BottomPage .pages { display: flex; justify-content: space-between; }
.BottomPage .pages a.nopage { visibility: hidden; }
.BottomPage .pages .page > div { display: inline-block; padding:0px 20px; }
.BottomPage .pages .page .active { color:#ccecfb; }

.BottomPage .linkIcon { font-size:1.125rem; }



.footer .area .rightArea { text-align:left; }
.footer .area1 { padding:65px 0px; background:url("./images/img_foot-bg.jpg")no-repeat left center; background-size:cover; }
.footer .area1 .leftArea { display: flex; justify-content: center; align-items:center; padding:35px 0px; border:2px solid #fff; color:#fff; font-size:1.5rem; }
.footer .area1 .leftArea:hover { background-color:#fff; color:#073190; }
.footer .area1 .rightArea a { color:#fff; }
.footer .area1 .rightArea a:hover { color:#3553ef; }
.footer .area1 .rightArea { color:#fff; }
.footer .area1 .rightArea tr:not(:first-child) td { padding-top:10px; }
.footer .area1 .rightArea i { padding-right:10px; text-align: center; }

.footer .area2 { padding:50px 0px; background-color:#fff; }
.footer .area2 .leftArea img { max-width:200px; }
.footer .area2 .rightArea { display: flex; justify-content: space-between; }
.footer .area2 .rightArea a { color:#0c1e33; display: block; }
.footer .area2 .rightArea a:hover { color:#3553ef; }
.footer .area2 .rightArea .tt1 { padding-bottom:20px; }
.footer .area2 .rightArea .tt2 { padding-bottom:10px; font-size:0.875rem; }

.footer .area3 { color:#314a5e; padding:40px 0px; background-color:#fff; border-top:1px solid #e5edf2; font-size:0.875rem; }
.footer .area3 a { color:#314a5e; }
.footer .area3 .linkIcon a:hover { color:#3553ef; }
.footer .area3 a.isun:hover { border-bottom:1px solid #314a5e; }

/************************** video rwd **************************/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

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

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

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

/************************** map rwd **************************/
.map-responsive{
    overflow:hidden;
    padding-bottom:480px; /* map height */
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media ( max-width:1500px ) and ( min-width:1200px ){
    .topnb { padding:20px 60px; }
	.topnb .bread { padding-right:250px; }
	.topnb .navitem { margin-right:20px; }
}

@media (min-width:1200px){
	form .security > div { width:160px; }

	.topnb .nb { margin-top:16px; }
	
	.topmenu .img { width:30%; background:url("./images/img_menu.jpg")no-repeat center center; background-size:cover; }
    .topmenu .tm { width:70%; padding:0px 125px; }
	.topmenu .tmheader { margin-bottom:36px; }
}

@media (max-width:1199.98px){
	.mtop { height:112px; }
	form .security > div { width:140px; }

	.topnb { padding:20px 40px; }
	.topnb .nb { padding:12px 0px; }
	.topnb .LinkArea1 { width:48px; height:48px; padding:15px 0px; }
	
	.topmenu { width:100%; padding:0px 75px; }
	.topmenu .tm { width:100%; }

	.topnb .nb .dp_menu { display: none; }
}

@media (min-width:992px){
	.footer .area { display: flex; }
	.footer .area .leftArea { width:255px; margin-right:138px; }
	.footer .area .rightArea { width:calc(100% - 393px); }

	.footer .area3 .area { justify-content: space-between; }
	.footer .area3 .copy { padding-right:20px; }
}

@media (max-width:991.98px){

	form .security > div { width:105px; }

	.footer .area1 .leftArea { display: none; }
	.footer .area2 .rightArea { display: none; }
	.footer .area3 .linkIcon { justify-content: center; margin-bottom:20px; }

}

@media (min-width:768px) and (max-width:991.98px){
    
}

@media (min-width:768px){
	.linkIcon a { padding-right:25px; }

	.topmenu .tmbody .menu { margin-bottom:40px; }
	.topmenu .tmbody .menu2 { margin-top:10px; }
	.topmenu .tmfooter .linkIcon { padding-left:130px; }
	
}

@media (max-width:767.98px){
	.mtop { height:100px; }
	form .security { flex-wrap: wrap; justify-content: flex-start; }
	form .security .ipt { width:100%; }
	form .security .img { width:160px; }
	form .security .chg { margin-left:20px; width:80px; }

	.topnb { padding:20px; }
	.topnb .logo { width:auto; }
	.topnb .logo img { height:60px; width:auto; }

    /* 標題 */
    .UnitTitle { height:40px; }
    .UnitTitle .txt { padding-left:10px; }
    .UnitTitle .txt .tt1 { font-size:0.75rem; line-height: 10px; }
	.UnitTitle .txt .tt2 { font-size:1.25rem; line-height:20px; padding-top:10px; }
	
	/* 內頁標題 */
	.UnitTitle.active { height:50px; }
	.UnitTitle.active .txt { padding-left:15px; }
    .UnitTitle.active .txt .tt1 { font-size:0.75rem; }
    .UnitTitle.active .txt .tt2 { font-size:2rem; line-height:25px; padding-top:15px; }

	form .security input { margin-bottom:25px; }

	

    /* 連結 */
    .LinkArea1 { padding:8px 25px; font-size:0.875rem; }
	.LinkArea2 { padding:5px 0px; width:24px; height:24px; font-size:0.75rem; }

	.linkIcon a { padding:0px 10px; }

	.topnb .LinkArea1,
	.topnb .LinkArea2,
	.topmenu .tmheader a.cloz { width:36px; height:36px; padding:11px 0px; margin-left:10px; font-size:0.875rem; }

	.topmenu { padding:30px; }
	.topmenu .tmheader { padding:0px; }
	.topmenu .tmbody { padding:60px 0px; }
	.topmenu .tmbody .menu { display: block; }
	.topmenu .tmbody .menu a { margin-bottom:20px; }
	.topmenu .tmbody .menu > div , .topmenu .tmbody .menu2 > div { border-bottom:1px solid #9caeb8; }
	.topmenu .tmbody .menu2 { display: block; }
	.topmenu .tmbody .tt { position: relative; font-size:1.25rem; padding:20px 0px; margin-bottom:0px; }
	.topmenu .tmbody .tt .icon { position: absolute; right:15px; top:25px; }
	.topmenu .tmbody .items { display: none; }
	.topmenu .tmbody .items .simg { width:20px; height:15px; padding-right:5px; padding-bottom:5px; transform:translate(0px , -4px); }
	.topmenu .tmbody .items .simg img { width:50%; }
	.topmenu .tmfooter .linkIcon { margin:30px 0px; justify-content: center; width:100%; }

	.totop { width:32px; height:32px; padding:9px 0px; font-size:0.875rem; right:20px; }

	.footer .area1 { padding:40px 0px; }
	
	.BottomPage.PAGEMODE { position: relative; padding:15px 0px; }
	.BottomPage .page input { width:60px; height:48px; background-color:#e5edf2; border:none; padding:15px 0px; text-align:center; }
	.BottomPage .pages .prevbtn,
	.BottomPage .pages .nextbtn { position: absolute; top:0px; width:80px; height:78px; padding:28px 0px; }
	.BottomPage .pages .prevbtn { left:0px; border-right:1px solid #e5edf2; }
	.BottomPage .pages .nextbtn { right:0px; border-left:1px solid #e5edf2; }

	.BottomPage .backArea { text-align:right; }
	.BottomPage .backArea .linkIcon a { padding:0px; padding-left:20px; }

	.map-responsive { padding-bottom:300px; }
}