@charset "utf-8";
.portal{
	display:block;

}


a,
a:hover { text-decoration: none; }
/*************** popup ****************/


.blogshareArea {background: #fffeea;padding: 30px 0;}
.blogshareArea .demoTitle{
    text-align: center;
    color:#333;
    margin:0 auto 15px;
    font:bold 24px/1.1 '微軟正黑體','Microsoft JhengHei','新細明體','PMingLiU',Arial,sans-serif; 
}
.blogshareArea .demoTitle b{
    border-radius: 50%;
    background-color:#fede65;
    display: inline-block;
    padding:8px;
    margin:0 4px;
}

.blogshare {max-width:1400px;margin: 0 auto;text-align: center;}
.blogshareBox{border-radius: 20px;border: 4px solid #2f6bb3;width: 42%;overflow: hidden;position: relative;display: inline-block;margin: 10px;}
.blogshareBox img {overflow: hidden;width: 100%;}
.blogshareTitle{position: absolute;bottom: 0;background: rgba(0,0,0,0.8);width: 100%;padding: 10px;text-align: center;}
.blogshareTitle b {font:bold 24px/1.4 "微軟正黑體";color:#ffde65;}
.blogshareTitle p {color:#FFF;}
.blogshareTitle p span {color:#a5cbf9;}
.blogshareTitle p a {color:#fff;}


@media screen and (max-width: 900px) {
.blogshareBox{width: 80%;}

}
@media screen and (max-width: 480px) {
.blogshareBox{width: 90%;}
.blogshareTitle b {font:bold 18px/1.4 "微軟正黑體";}
}



.demos{
	max-width: 1200px;
	margin:0 auto;
	padding:0;
}

.demos .demoTitle{
	text-align: center;
	color:#333;
	margin:0 auto 15px;
	font:bold 24px/1.1 '微軟正黑體','Microsoft JhengHei','新細明體','PMingLiU',Arial,sans-serif; 
}
.demos .demoTitle b{
	border-radius: 50%;
	background-color:#fff;
	display: inline-block;
	padding:8px;
	margin:0 4px;
}
.list{
	list-style: none;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
.btn{	
	width:20%;
	float: left;	
	list-style: none; 
	margin:0 auto 30px;
}

.list li span{
	cursor: pointer;
}
.btn:last-child{
	padding-left:none; 
}

.btn img{
	width:90%;
	height: auto;
}
.content{
	margin:0 auto;
	overflow-y:scroll;	
	background-color:#fff;
}

.a1Box{
	display: none;	
	overflow: hidden;
 
}
.a2Box{
	display: none;	
	overflow: hidden;
}
.a3Box{
	display: none;
	overflow: hidden;
}

.max1200Box {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.space{
    display:block;
    height:24px;
    margin:0 auto;
}
.mainViewBox {
    margin: 40px auto 0;
    padding: 0;
    position: relative;
}
.mainViewBox img {
    width: 100%;
    border: 0;
    display:block;
}

.moreBox{
    width:100%;
    position: absolute;
    z-index:2;
    left:0;
    bottom:0;
    text-align: center;
    padding:8px 0;
    font:normal 16px/1 Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif;
    color:#fff; 
    cursor: pointer;   
    background-color:rgba(33,48,60,0.6);
}
.moreBox a{
    color:#fff;
}
.icon1{
    display: inline-block;
    width:18px;
    height: 18px;
    background:url(../img/icon1.png) left top no-repeat;
    background-size: cover;
    margin-left:4px;
    vertical-align: -3px;
}
.moreBox .icon1{
    background:url(../img/icon2.png) left top no-repeat;
    background-size: cover;
}
.moreBox.open .icon1{
    background:url(../img/icon3.png) left top no-repeat;
    background-size: cover;
}
/*內容區塊*/
.content11 {
    margin: 0 auto;
    padding:20px 40px;
    background-color: #fff;
}
.grayBox{
    margin:0 auto 24px;
    padding:15px;
    border:5px solid #e8e8e8;
}
/*標題*/
.titleType1{
    margin:0 auto 4px;
    padding:0;
    font:bold 18px/2.4 Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif;
    color:#333;
}

.grayBox li{
        list-style-type: square;
        font:normal 14px/1.8 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
        color:#333;
        margin-left:20px;
}
/*注意事項*/
.noteBox1{
    margin:0 auto;
    padding:0;
    color:#333;
    text-align: left;
}

.noteBox1 h5{
    margin:0 auto 8px;
    padding:0 0 3px;
    font:bold 18px/2 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
}
.noteBox1 ol{
    width:100%;
    list-style: decimal;
    margin:0 auto 10px;
    padding:0 0 0 30px;
}

.noteBox1 ol li{
    display:list-item;
    padding:0;
    font:normal 14px/2 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
    text-align: left;   
}
.noteBox1 ol li a{
    text-decoration: underline;
}
.noteBox1 ol li img{
    max-width: 949px;
    width: 100%;
    margin:15px auto;
}

.bottom-nav1{
    padding: 20px 0; margin: 0 auto;
}

ul.blist{
    list-style: none;
    display: inline-block;
    width:100%;
    background: #efefef; border-radius: 5px; text-align: center; width: 100%; padding-bottom: 20px;
    text-align:center;
}
ul.blist > li{
    width:19%;
    display: inline-block;
    box-sizing: border-box;
    padding:8px;
    text-align: left;
    background: #fff;
    vertical-align: middle;
    border-radius: 5px;
    margin: 20px 3px 0;
    position: relative;
}
ul.blist > li:hover,ul.blist > li:first-child:hover{
    background:#ffcc0f;
}
ul.blist > li:first-child{background-color:#ceeae6;}

ul.blist > li .new{
    display: block;
    width:50px;
    height:24px;
    background:url(../img/new.png) left top no-repeat;
    position: absolute;
    z-index: 2;
    right:0;
    top:0;
    margin:-5px 5px auto auto;
    transform: rotate(-15deg);
    border-radius: 5px;
}

ul.blist > li a:link,ul.blist > li a:visited{
    color: #000;
    font-size: 16px;
    display: block;
    padding: 6px;
    min-width: 10em;
    text-align: left;
    text-decoration: none;
}
ul.blist li b {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background-color: #efefef;
    width: 47px;
    height: 47px;
    border-radius: 100%;
}

ul.blist li b:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 47px;
    height: 47px;
    background: url(../img/foot_nav_sprite.png) 0 0  no-repeat;
}
ul.blist li b.insure:before {
    background: url(../img/insu.png) 0 0  no-repeat;
}
ul.blist li b.location:before {
    background: url(../img/foot_nav_sprite.png) 0 0  no-repeat;
}
ul.blist li b.qa:before {
    background: url(../img/foot_nav_sprite.png) -47px 0  no-repeat;
}
ul.blist li b.steps:before {
    background: url(../img/foot_nav_sprite.png) 0 -47px  no-repeat;
}
ul.blist li b.help:before {
    background: url(../img/foot_nav_sprite.png) -47px -47px  no-repeat;
}
ul.blist li a:after {
    content: "\E5C5";
    font: normal 24px/1 'Material Icons';
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    content: "\E5CC";
    color: #000;
    vertical-align: middle;
    float: right;
    padding: 18px 0;
}
ul.blist li:after {
    content: "";
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    visibility: hidden;
}



.buttonBaes { text-align: center; width: 100%  ; margin-bottom: 50px; }
.buttonBaes .button { display: inline-block; padding: 10px 10% ; margin:0 20px; border-radius: 99em;  background: #17beb9}
.buttonBaes .button a,
.buttonBaes .button a:link,
.buttonBaes .button a:visited { font: bold 20px/20px "arial","微軟正黑體";color: #fff }

@media only screen and (max-width: 620px) {
.buttonBaes .button { display: inline-block; padding: 10px 10% ; margin:2% 0; width: 80%; border-radius: 99em;  background: #17beb9}
}