/*common*/
/*layout*/
.newCntBox{
	width:100%;
	max-width: 950px;
	margin:0 auto 16px;
	padding:0;
}
.newCntBox:after{
	content:'';
	clear: both;
	display: block;
	margin:0;
	padding:0;
}
.colx2{
	width: 50%;
	display:inline-block;
	vertical-align: top;
	margin:0 -2px;
	padding:0;
	
}
.popLoginArea{
	width:100%;
	height:100%;
	position: absolute;
	left:0;
	top:0;
	z-index: 1999;
	background:rgba(255,255,255,0.7);
	display: inline-block;
	vertical-align: middle;
}
/*灰框中標題*/
.mid_title {
	display:inline-block;
	font:bold 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color: #333;
	letter-spacing: 1px;
	padding:0.1em 1em 0.1em 10px;
	margin: 0 8px 16px 0;
	position: relative;
}
.mid_title:after{
	content:'';
	clear: both;
	display: block;
	margin:0;
	padding:0;
}
.mid_title:before{
	content:'';
	width:6px;
	height: 100%;
	background-color: #005598;
	display: block;
	position: absolute;
	border-radius:2px;
	left:0;
	top: 0;
}

/*文字段落*/
.psText{
	font:normal 15px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
	margin:0 auto;
	padding:15px 0;	
}
.psText strong{
	font:bold 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#ED7700;
}
.dataFrom{
	font:normal 14px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#3399cc;
	margin:0 auto;
	padding:15px 0;	
}
.dataFrom:before{
	content:'資料來源：'
}	
.dataFrom strong{
	font-weight: bold;
}
/*注意事項*/
.noticeArea{
	margin:0 auto;
	padding:16px 0;
}
.noticeArea .tit{
	font:bold 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
	margin:0 auto 4px;
	padding:0;
}
.noticeArea > ol{
	list-style: decimal;
	margin:0 auto;
	padding:0 0 0 24px;
}
.noticeArea > ol > li{
	font:normal 14px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
	margin:0;
	padding:0 0 8px;	
}
/*表單元素*/
/*input ========================================================================*/
.checkbox {
    vertical-align: middle;
    display: inline-block;
}
.checkbox input[type="checkbox"] {
	display: none;
}

.checkbox .checkbox-fake {
	display: inline-block;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	box-shadow: 0px 0px 0px 2px #c7c7c7;
	background: #fff;
	border-radius: 3px;
	transition: 0.3s ease all;
	position: relative;
}
.checkbox .checkbox-fake i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: #fff;
	font-size: 15px;
	transition: 0.3s ease all;
}
.checkbox input[type="checkbox"]:checked + .checkbox-fake {
	background: #ffffff;
	border-color: #fae103;
}
.checkbox input[type="checkbox"]:checked + .checkbox-fake i{
	color: #000;
}
.radio {
    vertical-align: middle;
    display: inline-block;
}
.radio input[type=radio] {
	display: none;
}

.radio .radio-fake{
	display: inline-block;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: solid 2px #a4a4a4;
	background: #fff;
	border-radius: 100%;
	transition: 0.3s ease all;
	position: relative;
}
.radio .radio-fake i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: #fff;
	font-size: 13px;
	transition: 0.3s ease all;
}
.radio input[type=radio]:checked + .radio-fake {
	background: #fff;
	border-color: #a4a4a4;
}
.radio input[type=radio]:checked + .radio-fake i{
	color: #000;
}
.radio .radio-text {
	display: inline-block;
	vertical-align: middle;
	font-size: 17px;
	padding-left: 8px;
}


label {
	cursor: pointer;
	vertical-align: middle;
}

button {
    border: none;
    color: #fff;
    transition: 0.3s ease all;
    border-radius: 5px;
    cursor: pointer;
}
button i{
	margin-left: 5px;
}
input,button {
    outline: none;
    font-family: Arial, "Microsoft JhengHei" ,  "Helvetica Neue", Helvetica, sans-serif;
}

input,button,select {
    outline: none;
    font-family: Arial, "Microsoft JhengHei", "Helvetica Neue", Helvetica, sans-serif;
}
input [type=text],input[type=password],
input[type=tel],input[type=search],
input[type=number],input[type=email],
.inputStyle {
    border-radius:6px;
    border: solid 1px #c7c7c7;
    background: #fff;
    font-size: 17px;
    box-sizing: border-box;
    padding: 1em 10px;
	width: 100%;
}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
	input [type=text],input[type=password],
	input[type=tel],input[type=search],
	input[type=number],input[type=email],
	.inputStyle {
		box-sizing:content-box;
		padding: 0.5em 10px;
	}
}
select {
    box-sizing: border-box;
    padding: 0 24px 0 10px;
    font-size: 17px;
    line-height: 36px;
    height: 36px;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: #fff url(https://www.franklin.com.tw/Content/Frontend/images/icon-dropdown.png) right center no-repeat;
    background-size: 18px;
    border-radius:6px;
    border: solid 1px #bfbdbd;
}
select ::-ms-expand {
	display: none;
}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
	select {
		width: 96%;
		padding: 0 0 0 10px;
		box-sizing:content-box;
		background-image:none;
		background-color:#fff;
	}
}
select option {
	background: #fff;
	color: #333;
	line-height: 1.6;
}
select option:checked {
background: #005598;
color: #fff;
}
/*按鈕*/
.rBtn{
	display: inline-block;
	border:1px solid #ccc;
	color:#ED7700;
	padding:4px 6px;
	text-decoration: none;
	font:normal 13px/1.1 Arial, "Microsoft JhengHei", "Helvetica Neue", Helvetica, sans-serif;
	border-radius:6px;
	margin:0 5px;
	cursor: pointer;
}
.rBtn:hover{
	color:#333;
}

.rBtn:before{
	content:'›';
	display: inline-block;
	margin-right:3px;
}
/*table外框*/
.tableArea{
	width:100%;
	margin:0 auto;
	padding:0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/*模擬table*/

/*20201105市場快訊*/
.newMktArea{
	margin:0 auto;
	padding:0;
	vertical-align: top;
	text-align: left;
	box-sizing: border-box;
}
.newMktArea:after{
	content:'';
	display:block;
	clear:both;
}
.newMktArea > .catelogArea{
	width:20%;
	display: block;
	margin:0 auto 16px;
	padding:16px;
	border:1px solid #ccc;
	background-color:#fff;
    float:left;
    box-sizing: border-box;
}
.newMktArea > .catelogArea > .pcUseArea{
	display: block;
}
.newMktArea > .catelogArea > .mUseArea{
	display: none;
}
.topicArea{
	margin:0 auto 4px;
	padding:0;
	display: block;
}
.topicArea > h3.tit{
	margin:0 auto;
	padding:4px 8px;
	font:bold 18px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#666;
	cursor: pointer;
	transition: all 0.3s ease;
	background-color:#fff;
	border-radius: 4px;
}
.topicArea > h3.tit > i.fas{
	margin-left:-8px;
	color:#fff;
	transition: all 0.3s ease;
	opacity:0;
}
.topicArea > h3.tit.act{
	color:#fff;
	background-color:#005598;
}
.topicArea > h3.tit.act > i.fas{
	margin-left:4px;
	opacity:1;
}
.textSearchBox{
	border-top:1px solid #ccc;
	background-color:#efefef;
	margin:0 auto;
	padding:8px;
	text-align: right;
}
.textSearchBox > .tit{
	font:bold 15px/1.2 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#005598;
	margin:0 auto 4px;
	padding:0;
	text-align: left;
}

.textSearchBox > input.textInput{
	border:1px solid #ccc;
	padding:10px;
	margin:0 auto 8px;
	display: inline-block;
	box-sizing: border-box;
	width:100%;
	font:normal 14px/1.2 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
	height:auto;
	transition: border 0.5s ease;
	text-align: left;
}
.textSearchBox > input.textInput:focus{
	outline: none;
	border:1px solid #005598;
}
.textSearchBox > .btn{
	display:inline-block;
	color:#fff;
	margin:0 auto;
	padding:4px 8px;
	text-align: center;
	font:normal 14px/1.2 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:#005598;
	border-radius: 4px;
	cursor: pointer;
}
/*
.topicArea > .topicList{
	list-style: none;
	margin:0;
	padding:0;
	overflow: hidden;
	display: none;
	float:none;
}
.topicArea > .topicList > li{
	margin:0 auto;
	padding:8px;
	font:normal 15px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
    transition: all 0.3s ease;
    border-radius:4px;
}
.topicArea > .topicList > li > i.fas{
    display: none;
    margin-right:8px;
}
.topicArea > .topicList > li:hover,
.topicArea > .topicList > li.show{
    color:#fff;
    background-color:#005598;
}
.topicArea > .topicList > li:hover > i.fas,
.topicArea > .topicList > li.show > i.fas{
    display: inline-block;
}
*/
.cardList{
	width:80%;
	margin:0;
	padding:0;
	float: left;
	display:table;
	box-sizing: border-box;
}
.cardList:after{
	content:'';
	display:block;
	clear:both;	
}

.cardList > .cardInfoBox{
	width:30%;
	display:block;
	margin:0 0 16px 3%;
	padding:0;
	text-decoration: none;
	position: relative;
	border:1px solid #ccc;
	border-radius: 4px;
	float:left;
	transition: all 0.5s ease;
	overflow: hidden;
}
.cardList > .cardInfoBox:hover{
	border:1px solid #005598;
}
.cardList > .cardInfoBox .topicImg{
	display:block;
	width:100%;
	padding-top:57.84%;
	margin:0 auto;
	position: relative;
	overflow: hidden;
	border-bottom:1px solid #ccc;
}

.cardList > .cardInfoBox .topicImg > img{
	display:block;
	width:100%;
	position: absolute;
	z-index: 2;
	left:0;
	top:0;
	transition: all 0.5s ease;
	
}
.cardList > .cardInfoBox:hover img{
	transform: scale(1.1);
}
.cardList > .cardInfoBox h4{
	font:bold 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
	padding:16px 8px;
	margin:0 auto;
	height:4.2em;
	overflow:hidden;
	transition: all 0.5s ease;
}
.cardList > .cardInfoBox:hover h4{
	color:#005598;
}
.cardList > .cardInfoBox .date{
	font:normal 12px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#666;
	padding:0 8px 8px;
	margin:0 auto;
	display:block;
}
.cardList > .cardInfoBox p{
	font:normal 14px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#000;
	padding:0 8px 8px;
	margin:0 auto;
}

/*我的基金單元步驟說明*/
.stepAreaBox{
	margin:0 16px 16px;
	padding:16px;
	background-color: #f1f1f1;
	border:1px solid #ccc;
	box-sizing: border-box;
	text-align: center;
	border-radius:4px;
  }
  
  .stepInfoBox{
	display: block;
	margin:0 auto 8px;
	padding:0.5em 1em;
  
	background-color: #fff;
	font:bold 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
  }
  .stepInfoBox > article{
	width:80px;
	height:80px;
	border-radius: 50%;
	margin:0 auto 8px;
	padding:10px;
	box-sizing: border-box;
	border:3px solid #005598;
  }
  .stepInfoBox > article img{
	display:block;
	width:100%;
	margin:0 auto;
	
  }
  .stepInfoBox.first{
	color:#fff;
	background-color:#005598;
  }
  .stepInfoBox.second{
	color:#fff;
	background-color:#82BC00;
  }
  
  .stepAreaBox > .arraw{
	font-size: 24px;
	color:#666;
	margin:0 auto 8px;
  }
/*新增到價通知*/
.addFundList{
	list-style: none;
	margin:0 auto;
	padding:15px;
	box-sizing: border-box;
	border-radius:6px;
	border:1px solid #ccc;
	background-color:#f3f3f3;
}
.addFundList > li{
	display:block;
	font:normal 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
	padding-bottom:16px;
}
.addFundList > li > .radio > .radio-fake,
.addFundList > li > .checkbox > .checkbox-fake{
	vertical-align: middle;
}
/*表單列表:修改到價通知頁*/
.formInputList{
	list-style: none;
	margin:0 auto;
	padding:16px 0 0;
}
.formInputList > li{
	display: block;
	padding: 0 0 16px;
	font:normal 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
}
.formInputList > li > h6{
	display: block;
	font:bold 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;	
}
.formInputList > li > .radio > .radio-fake{
	vertical-align: middle;
}
.formInputList > li > .checkbox > .checkbox-fake{
	vertical-align: middle;
}
.formInputList > li > .inputStyle{
	width:90%;
}
.formInputList > li > a{
	color:#005598;
	text-decoration: underline;
}
.formInputList > li > a:hover{
	color: #00a0dc;
	text-decoration: none;
}
/*會員登入：我的基金頁*/
.memberLoginArea{
	margin:8px auto;
	padding: 24px;
	background-color:#fff;
	border-radius: 4px;
}
.memberLoginArea:after{
	content: '';
	clear:both;
	display: block;
}
.memberLoginArea > .leftSide{
	width:25%;
	float:left;
}
.memberLoginArea > .rightSide{
	width:75%;
	float:left;
}
.memberLoginArea > .leftSide .loginIcon{
	display: block;
	width:100%;
	max-width: 140px;
	border-radius: 50%;
	padding:10px;
	margin:0 auto;
	border:3px solid #005598;
	box-sizing: border-box;
}
.memberLoginArea > .leftSide .loginIcon img{
	width:100%;
	display: block;
	margin:0 auto;
}
.memberInputList{
	list-style: none;
	margin:0 auto;
	padding:16px 0 0;
}
.memberInputList > li{
	display: block;
	padding: 0 0 16px;
	font:normal 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;
}
.memberInputList > li > h6{
	display: block;
	font:bold 16px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#333;	
}
.memberInputList > li > .radio > .radio-fake{
	vertical-align: middle;
}
.memberInputList > li > .checkbox > .checkbox-fake{
	vertical-align: middle;
}
.memberInputList > li > .inputStyle{
	width:90%;
}
.memberInputList > li > a{
	color:#005598;
	text-decoration: underline;
}
.memberInputList > li > a:hover{
	color: #00a0dc;
	text-decoration: none;
}
@media only screen and (max-width:940px) {
	.header,.footer{
		/*	display:none;*/
	}
	.colx2{
		width: 100%;
		display:block;
		vertical-align: top;
		margin:0 auto 16px;
	}
    .newMktArea > .catelogArea > .pcUseArea{
        display: none;
    }
    .newMktArea > .catelogArea > .mUseArea{
        display: block;
	}
	.topicArea{
		margin:0 auto;
	}
    .newMktArea > .catelogArea{
        width:100%;
        display: block;
        margin-right:0;
        padding:0;
        border:0;        
        float:none;
        box-sizing: border-box;
    }
    select.dropSelBox{
        display: inline-block;
        width:100%;
        margin:0 auto;
        border:1px solid #ccc;
        border-radius: 4px;
        padding:8px 4px;
        box-sizing: border-box;
        font: normal 16px/1.2 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    }
    select.dropSelBox:focus{
        outline: none;
        border:1px solid #005598;
	}
	
	.cardList{
		width:100%;
		float:none;
		display:block;
	}
	.cardList > .cardInfoBox{
		width:30%;
		margin:0 1.5% 16px;
		float:left;
	}
}
@media only screen and (max-width:800px) {
	.container_alt {
		padding: 0px 16px;
		margin: 15px auto;
		position: relative;
	  }
	.newMktArea{
		padding:8px;
	}
	.cardList > .cardInfoBox{
		width:100%;
		margin:0 auto 16px;
		float:none;
	}
	.cardList > .cardInfoBox h4{
		height:auto;
		padding:8px;
		font:bold 18px/1.4 "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	}
	/*我的基金單元步驟說明*/
	.stepInfoBox > article{
		width:64px;
		height:64px;
	}
	/*會員登入*/
	.memberLoginArea > .leftSide .loginIcon{
		max-width: 100px;
	}
	.memberLoginArea > .leftSide,
	.memberLoginArea > .rightSide{
		width:100%;
		float:none;
	}
}