@charset "utf-8";
/* CSS Document */

.main ul.centerLinkDiv{
	overflow: hidden;
}
.main ul.centerLinkDiv li{
	float: left;
	width: 33.33%;
	box-sizing: border-box;
}

/*左欄＿快速推薦 及 右下欄＿保戶服務*/
	.main ul.centerLinkDiv li.left div.grayLinkArea,
	.main ul.centerLinkDiv li.right div.grayLinkArea{
		padding: 30px 0 0 0;
		background: #F6F6F6;
	}

	.main ul.centerLinkDiv li.left div.grayLinkArea p,
	.main ul.centerLinkDiv li.right div.grayLinkArea p{
		margin: 0 30px 30px 30px;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a,
	.main ul.centerLinkDiv li.right div.grayLinkArea a{
		display: block;
		border-bottom: 1px solid #cecece;
		border-top: 1px solid #FFF;
		padding: 13px 5px 13px 30px;
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a div,
	.main ul.centerLinkDiv li.right div.grayLinkArea a div{
		font-size: 18px;
		color: #333333;
		line-height: 1.8;
		background: url(../images/all/blackGrayArrowRight.svg) no-repeat 94% 50%;
		background-size: 10px 10px;
		padding-right: 35px;

		/*加了以下ＣＳＳ文字超過自動省略*/
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		position: relative;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a:first-of-type,
	.main ul.centerLinkDiv li.right div.grayLinkArea a:first-of-type{
		border-top: 0;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a:last-of-type,
	.main ul.centerLinkDiv li.right div.grayLinkArea a:last-of-type{
		border-bottom: 0;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a:hover,
	.main ul.centerLinkDiv li.right div.grayLinkArea a:hover{
		background: #fe000c;
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a:hover div,
	.main ul.centerLinkDiv li.right div.grayLinkArea a:hover div{
		background: url(../images/all/whiteArrowRight.svg) no-repeat 94% 50% ;
		color: #FFF;
		background-size: 10px 10px;
	}

/*跑馬燈*/
	.main ul.centerLinkDiv li.center .topMarquee{
		width: 100%;
	}
	.main ul.centerLinkDiv li.center .topMarquee .marqueeTitle{
		width: 50px;
		height: 50px;
    	float: left;
    	background: url(../images/index/centerLinkDivCenterTitle.svg) no-repeat left center;
	}
	.marquee {
        width: auto;
        height: 50px;
    	margin: 0 0 0 60px;

        overflow: hidden;
        text-align: center;
    }
    .marquee p {
        margin-right: 10px;
        width: auto;
        display: inline-table;
    }
    .main ul.centerLinkDiv li.center .marquee p a{
        width: auto;
        display: block;
        margin: inherit;
        border: 0;
        line-height: 36px;
    }
    .main ul.centerLinkDiv li.center .marquee p a:hover{
        background: none;
        color: #fe000c;
    }


/*網路投保旅平險全年無休*/
	.main ul.centerLinkDiv li.center{
		padding: 0 30px;
		font-size: 0;
		text-align: center;
	}
	.main ul.centerLinkDiv li.center a{
		border: 1px solid #CECECE;
		width: 48%;
		border-radius: 5px;
		display: inline-block;
		vertical-align: top;
		width: 48%;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 2;
		margin: 1%;
		color: #333333;
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.center a div{
		padding: 77px 10px 10px 10px;
	}
	.main ul.centerLinkDiv li.center a.bt01 div{
		background: url(../images/index/bt01.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt02 div{
		background: url(../images/index/bt02.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt03 div{
		background: url(../images/index/bt03.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt04 div{
		background: url(../images/index/bt04.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt05 div{
		background: url(../images/index/bt05.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt06 div{
		background: url(../images/index/bt06.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}

	.main ul.centerLinkDiv li.center a:hover{
		border: 1px solid #fe000c;
		background: #fe000c;
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.center a.bt01:hover div{
		background: url(../images/index/bt01White.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt02:hover div{
		background: url(../images/index/bt02White.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt03:hover div{
		background: url(../images/index/bt03White.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt04:hover div{
		background: url(../images/index/bt04White.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt05:hover div{
		background: url(../images/index/bt05White.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a.bt06:hover div{
		background: url(../images/index/bt06White.svg) no-repeat 50% 10%;
		background-size: 70px 70px;
	}
	.main ul.centerLinkDiv li.center a:hover div{
		color: #FFF; 
	}



/*保戶登入*/
	.main ul.centerLinkDiv li.right a.logIn{
		background: linear-gradient(to left,#E80100 , #FF8000);
		background: -moz-linear-gradient(to left,#E80100 , #FF8000);
		background: -webkit-linear-gradient(to left,#E80100 , #FF8000);
		display: block;
		color: #FFF;
		font-size: 26px;
		font-weight: 700;
		text-align: center;
		padding: 16px 5px;
		box-sizing: border-box;
		border-radius: 8px;
		border-bottom: 8px solid #FFB700;
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.right a.logIn:hover{
		background: linear-gradient(to left,#E80100 , #E80100);
		background: -moz-linear-gradient(to left,#E80100 , #E80100);
		background: -webkit-linear-gradient(to left,#E80100 , #E80100);
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.right a.logIn div{
		background: url(../images/all/whiteDot.svg) 96% 50% no-repeat;
		background-size: 15px 15px;
		
	}
	.main ul.centerLinkDiv li.right a.logIn:hover div{
		background: url(../images/all/whiteDot.svg) 96% 50% no-repeat;
		background-size: 15px 15px;
	}
	.main ul.centerLinkDiv li.right a.logIn img{
		width: 35px;
		display: inline-block;
		vertical-align: middle;
	}
	.main ul.centerLinkDiv li.right a.logIn img.whiteDot{
		float: right;
		width: 11px;
		margin: 1vw 3% 0 0;
	}
	.main ul.centerLinkDiv li.right a.logIn p{
		display: inline-block;
		vertical-align: middle;
	}
	.main ul.centerLinkDiv li.right div.registered{
		overflow: hidden;
		text-align: right;
		margin: 6px 0 15px 0;
	}
	.main ul.centerLinkDiv li.right div.registered a{
		border-bottom: 1px solid #FE000C;
		font-size: 14px;
		color: #333333;
		display: inline-table;
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.right div.registered a:hover{
		color: #FE000C;
		transition: all .3s;
	}
	.main ul.centerLinkDiv li.right div.registered p{
		border-bottom: 1px solid #CECECE;
		display: block;
		margin-top: -1px;
	}

.main .slider{
	margin: 50px 0;
	overflow: hidden;
}

/*即時快訊＋商品訊息*/
	.main .news{
		background: #FAF7F7;
		padding: 30px;
		overflow: hidden;
	}
	.main .news ul{
		width: 100%;
		max-width: 1240px;
		padding: 20px;
		box-sizing: border-box;
		margin: 0 auto;
		overflow: hidden;
	}
	.main .news ul li{
		float: left;
		width: 49%;
	}
	.main .news ul li:nth-child(2){
		float: right;
	}
	.main .news ul li p{
		border-bottom: 1px solid #B3B3B3;
		padding-bottom: 20px;
		font-size: 30px;
		display: block;
		text-align: center;
	}
	.main .news ul li .item{
		border-bottom: 1px solid #B3B3B3;
		padding: 17px 0;
		font-size: 14px;
		color: #333333;
	}
	.main .news ul li .item span{
		color: #FFF;
		background: linear-gradient(to left,#E80100 , #FF8000);
		background: -moz-linear-gradient(to left,#E80100 , #FF8000);
		background: -webkit-linear-gradient(to left,#E80100 , #FF8000);
		border-radius: 100px;
		padding: 3px 25px;
		margin-left: 5px;
	}
	.main .news ul li a{
		font-size: 16px;
		color: #333333;
		display: block;
		margin-top: 10px;
		transition: all .3s;

		/*加了以下ＣＳＳ文字超過自動省略*/
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.main .news ul li a:hover{
		color: #fe000c;
		transition: all .3s;
	}
	.main .news ul li a.more01{
		margin-top: 30px;
	}

/*如果您有任何問題...*/
	.contactUs{
		width: 100%;
		max-width: 1240px;
		margin: 80px auto;
		padding: 0 20px;
		box-sizing: border-box;
		overflow: hidden;
		text-align: center;
	}
	.contactUs p{
		font-size: 30px;
		margin: 0 auto 40px auto;
	}
	.contactUs .linkItem{
		width: 33%;
		max-width: 200px;
		overflow: hidden;
		display: inline-block;
		margin: 0 0.5%;
	}
	.contactUs .linkItem div{
		margin: 0 auto 20px auto;
	}
	.contactUs .linkItem a div{
		margin: 0 auto;
	}
	.contactUs .linkItem div img{
		width: 100%;
		max-width: 117px;
		border: 1px solid #CECECE;
		border-radius: 300px;
	}

@media screen and (max-width: 1150px){
	.main .mainCenterContent{
		padding: 0;
	}
	.FVbanner{
		margin-bottom: 30px;
	}
	.main ul.centerLinkDiv li{
		float: none;
		width: 100%;
	}
	.main ul.centerLinkDiv li.center,
	.main ul.centerLinkDiv li.right div.registered{
		padding: 20px;
	}
	.main ul.centerLinkDiv li.right a.logIn{
		margin: 0 20px;
	}
	.main ul.centerLinkDiv li.center a{
		margin: 0.5% 0;
		width: 49.5%;
	}
	.main ul.centerLinkDiv li.center a{
		margin-right: 1%;
	}
	.main ul.centerLinkDiv li.center a:nth-child(2n+1){
		margin-right: 0%;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a,
	.main ul.centerLinkDiv li.right div.grayLinkArea a{
		/*padding: 13px 8% 13px 20px;*/
		padding: 13px 20px;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a div,
	.main ul.centerLinkDiv li.right div.grayLinkArea a div {
	    background: url(../images/all/blackGrayArrowRight.svg) no-repeat 100% 50%;
	    background-size: 10px 10px;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea a:hover div,
	.main ul.centerLinkDiv li.right div.grayLinkArea a:hover div{
	    background: url(../images/all/whiteArrowRight.svg) no-repeat 100% 50%;
	    background-size: 10px 10px;
	    color: #FFF;
	}
	.main ul.centerLinkDiv li.left div.grayLinkArea p,
	.main ul.centerLinkDiv li.right div.grayLinkArea p{
		margin: 0 20px 30px 20px;
	}

	/*即時快訊＋商品訊息*/
		.main .news{
			padding: 30px 20px;
		}
		.main .news ul{
			padding: 20px 0;
		}
		.main .news ul li{
			float: none;
			width: 100%;
		}
		.main .news ul li:nth-child(2) p{
			margin: 70px 0 20px 0;
		}
}
@media screen and (max-width: 1000px){
	.main .slider{
		padding: 0 20px;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 710px){
	.contactUs p{
		font-size: 24px;
	}
	.contactUs .linkItem {
	    width: 29%;
	}
}
@media screen and (max-width: 600px){
	.contactUs .linkItem {
	    width: 100%;
	    display: block;
		margin: 30px auto;
	}
}
@media screen and (max-width: 400px){
	.main ul.centerLinkDiv li.center p{
		font-size: 16px;
		margin-bottom: 0;
	}
}