@charset "utf-8";
.filterBlk .resources { width:auto;}
.filterBlk .resources .blk{ display:inline-block; padding-right:0.5rem; vertical-align: top;}
.filterBlk .resources .blk .btn-primary{ float:left;}
.filterBlk .resources .blk:after, .watchBlk:after, .sliderOnly:after, .videoLibraryBlk .tableBlk.sortBy:after, .subBlk:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.filterBlk .resources label{
	display:block;
	float:none;
	height:inherit;
	line-height:inherit;
	margin:0 5px 0.5rem 5px;
	font-size: 14px;
	font-weight: bold;
}
.filterBlk .resources .searchBlk{padding: 0 10px 8px 10px;}

.faqBlk{ display:block;margin: 0 0 20px 0;}
.faqBlk .blk{
	display:block;
	border:1px solid #878787;/*2017 repair */
	margin: 0 0 1rem 0;
}
.faqBlk .type{
	padding:0.5rem 0.5rem 0.5rem 2.0rem;
	cursor:pointer;
	position:relative;
	background-color:#878787;/*2017 repair */
	color:#ffffff;
	font-size:14px;
	font-weight: bold;
}
.faqBlk .type:after{
	display:block;
	width:5px;
	height:5px;
	content:"";
	position:absolute;
	left: 16px;
    top: 16px;
	color:#ffffff;
	background-color:#ffffff;
	border-radius:50%;
}
.faqBlk .panel{ display:none;padding:0.5rem 0.5rem 0.5rem 0.875rem;}
.faqBlk .panel ul, .faqBlk .panel ol{ padding-left: 1.75rem;}
.faqBlk .panel li ul, .faqBlk .panel li ol{ padding-top: 0.5rem;}
.faqBlk .panel.active, .faqBlk .ans.active{ display:block;}
.faqBlk .title{
	padding:0 0 0.25rem 1.75rem;
	position:relative;
	/* font-weight:bold; */
	cursor:pointer;
}
.faqBlk .title, .faqBlk .ans{font-size:14px; position:relative; line-height:1.417;}
.faqBlk .title:before, .faqBlk .ans:before{
	display:block;
	width:20px;
	height:20px;
	color:#e71e0f;
	font-size:14px;
	font-weight: bold;
	position:absolute;
	left:0;
	top:0;
}
.faqBlk .title:before{ content:"Q：";color:#333333;}
.faqBlk .ans:before{ content:"A：";top: 3px;}
.faqBlk .title:hover, .FAQBlk .title.active:hover{ color:#e71e0f;}
.faqBlk .ans{ display:none;padding:0 0 0 1.75rem;position:relative;}
.faqBlk .ans a, .faqBlk .ans a:hover{color:#e71e0f;}
.faqBlk .ans a:hover{ text-decoration:underline;}
.faqBlk .ans img{
	max-width:100%;
	margin:1rem 0;
}
.faqBlk .panel .blk{ border:none; margin: 0 0 0 0;}
.faqBlk .panel .type{
    padding: 0 0 10px 1rem;
    background-color: transparent;
    color:#e71e0f;
    font-size: 14px;
	font-weight: 400;
}
.faqBlk .panel .type:after{
	content:"\f0da";
	font-family: FontAwesome;
	left: 3px;
    top: 4px;
	color:#e71e0f;
	background-color:transparent;
	border-radius:0;
	font-size:14px;
}
.faqBlk .panel .type.active:after{ content:"\f0d7";left: 2px;}
.faqBlk .panel .panel{ padding:0 0 0 1.25rem;}
.faqBlk .panel .panel .title{ padding:0 0 10px 1.75rem;}
.faqBlk .panel .panel .title, .faqBlk .panel .panel .ans{ color:#333333; line-height:1.417;}
.faqBlk .panel .panel .title:before, .faqBlk .panel .panel .ans:before{
	color:#e71e0f;
	font-size:14px;
	position:absolute;
	left:0;
	top:0;
	font-weight:bold;
}
.faqBlk .panel .panel .title:before{ content:"Q：";color:#333333;}
.faqBlk .panel .panel .ans:before{ content:"A：";top:3px;}
.faqBlk .panel .panel .ans{font-size: 1.0rem;padding:0 0 0 1.75rem;display:none;}

.formBlk .supportType .blk{ display:inline-block;}
.formBlk .supportType .blk label{ display:inline-block;}
.formBlk .supportType select, .formBlk .supportType input[type="text"]{ margin:0 2rem 0 0;}
.formBlk .supportType input[type="text"]{width:auto;}


.subBlk{ display:block;vertical-align:top; padding-top: 20px; position: relative;}
.watchBlk{ display:block;margin:0 0 1rem 0;}
.watchBlk>.pull-left{ width:45%;}
.watchBlk>.pull-right{ width:55%;}
.watchBlk>.pull-left .video-container{ margin: 0 0 1rem 0;}
.watchBlk>.pull-right .subBlk{ margin:0 0 0 1.5rem;}
.watchBlk>.pull-right .pull-left, .watchBlk>.pull-right .pull-right{ float:none;}
.subBlk .title{ margin:0 0 1rem 0; font-size:1.5rem; font-weight:bold; line-height: 1.417;}
.subBlk .btn{ margin:0 0.5rem 0.75rem 0; text-align: left;
	/*position: absolute;
	right: 0;
	bottom: 0;*/
}
.subBlk .btn-default:hover, .subBlk .btn-default:focus{ color:#e71e0f;}
.subBlk .btn-default:focus{background: #e71e0f;color:#ffffff;}
.subBlk .btn.disabled:focus{background: inherit;color:inherit;}
.subBlk .btn i{ margin-right:5px;}
.subBlk .btn-default:hover i{ color:#e71e0f;}
.subBlk .btn-default:focus i{color:#ffffff;}
.subBlk .btn.disabled:focus i{color:inherit;}
.subBlk ul{ padding-left:0;}
.subBlk ul li{
	list-style-type:none;
	margin:0 1.5rem 0 0;
	height:26px;
	line-height:26px;
	vertical-align:top;
}
.subBlk ul li:last-of-child, .subBlk ul li.rate{ margin:0 0 0 0;}
.subBlk ul li.rate{ margin:0 24px 0 0;}
.subBlk ul li.rate{ position:relative; display: inline-block;}
.subBlk ul li>span{ font-weight:bold;}
.subBlk ul li.rate>span{ 
	display: inline-block;
    height: 26px;
    line-height: 26px;
    vertical-align: inherit;
}
.subBlk ul li.rate .counter{
	position:absolute;
	right:-22px;
	top:3px;
	font-size:0.938rem;
	text-align:left;
	width:22px;
}

.videoOnly { position:relative; margin:0 0 2rem 0;}
.videoOnly .pull-left{ width:65%; float:left;}
.videoOnly .pull-right{ width:33%; float:right;}
.videoOnly .socialBlk{ position:static; right:inherit; top:inherit;}
.videoOnly .socialBlk .blk{ float:none;}
.videoOnly .socialBlk p{ padding:0 0;}
.videoOnly .socialBlk li:nth-child(1){ margin:0 0;}

.bussinessConduct .formBlk .th{width:30%;}

.sliderOnly .owl-theme .owl-dots{ bottom:-32px;}
.sliderOnly { margin: 0 0 2.5rem 0;position: relative;}
.sliderOnly .btn-primary{float: right;}
.sliderOnly ul{ text-align:center;padding:0 0;}
.sliderOnly ul li{ padding:0;position:relative;}
.sliderOnly ul li .type{
	display:block;
	height:22px;
	text-align:right;
	margin:0 0 0.25rem 0;
	line-height:inherit;
	font-size:0.875rem;
	overflow: hidden;
}
.sliderOnly ul li .type.red, .sliderOnly ul li p.type.red{
	display:block;
	height:22px;
	text-align:left;
	margin:0 0 0.25rem 0;
	line-height:inherit;
	font-size:1rem;
	overflow: hidden;
}
.sliderOnly ul li a{ display:block;position:relative;}
.sliderOnly ul li .imgCrop{
    margin: 0 0 3px 0;
	padding:0 0;
	text-align:center;
	position:relative;
	height: 0;
	padding-top: 66.1666%;
	overflow: hidden;
}
.sliderOnly ul li .imgCrop img{ 
	text-align:center; 
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}
.sliderOnly ul li p{
	display:block;
    margin: 0 0 15px 0;
    padding: 0 0;
	text-align:left;
	/*max-height:46px;*/
	font-size:14px;
	overflow:hidden;
	color:#333333;
}
.sliderOnly ul li .imgCrop:before{ 
	display: block;
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0,0,0,0) none no-repeat 0 0;
    z-index: 3;
    padding: 0;
    margin: 0;
}
.sliderOnly ul li .imgCrop .overlay{
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0);
	width: 100%;
	height:0;
	padding: 24px 24px;
	transition: .5s ease;
	color: rgba(255,255,255,1);
	text-align: left;
	overflow: hidden;
	display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;/*文字垂直置中*/
    flex-wrap: wrap;/*文字垂直置中*/
}
.sliderOnly.videoType ul li>a:hover .overlay{
	top: 0;
	height: 100%;
	background: rgba(0,0,0,.75) ;
	opacity: 1;

	
}
.sliderOnly ul li .imgCrop p{
    margin: 0 0;
    color: rgba(255,255,255,0);   
    text-align: left;
    display: block;
    display: -webkit-box;
    max-width: 100%;
    height: 100px;
    max-height: 100%;
    font-size: 14px;
    line-height: 24px;
    /*-webkit-line-clamp: 4;
    -webkit-box-orient: vertical;*/
    overflow: hidden;
	/*text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;*/
    opacity: 1;
}
.sliderOnly ul li .overlay.ie p, .sliderOnly ul li .overlay.ff p{/*IE無法顯示... FF單行才顯示...*/
	position: absolute;
	left: 24px;
	right: 24px;
	top: 0;
	display: block;
	top: 50%;
	margin-top: -55px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}
.sliderOnly ul li>a:hover .overlay p{color: rgba(255,255,255,1);}
.sliderOnly ul li>a:hover p{ text-decoration:none;color:#e71e0f;}
.sliderOnly.videoType ul>li .imgCrop:after{ 
	position: absolute;
    left: 50%;
    top: 50%;
	content:"";
    display: none;
    width: 45px;
    height: 45px;
    background: transparent url(../images/play_icon.png) no-repeat 0 0;
	margin:-22.5px 0 0 -22.5px;
	z-index:999;
	transition: all 0.25s ease-in;
}

.faqBlk.style02{ border:1px solid #bfbfbf;padding:0.5rem 0;}
.style02 .blk { border:none;margin: 0 0 0 0;}
.style02 .type {
    padding: 0.5rem 0.5rem 0.5rem 2.0rem;
    background-color: transparent;
    color: #333333;
	font-size: 14px;
	position:relative;
}
.style02 .type:after {
    width: 24px;
    height: 20px;
    content: "\f067";
	font-family: FontAwesome;
    font-size: 1.0rem;
    left: 7px;
    top: 10px;
    color: #333333;
    background-color: transparent;
    border-radius: 0;
	text-align:center;
}
.style02 .panel { padding: 0.5rem 1rem 0.5rem 2rem;}
.style02 .panel, .style02 .panel p, .style02 .panel li { font-size: 14px; line-height:24px;}
.style02 .type.active, .style02 .type.active:after, .style02 .panel a{ color: #e71e0f;}
.style02 .type.active:after{ content: "\f068";}
.style02 .panel a{ text-decoration:underline;}
.style02 .panel a:hover{ text-decoration:none;}

.videoLibraryBlk{ border:1px solid #e71e0f;padding:0.75rem; /*margin:0 0 2rem 0;*/}
.videoLibraryBlk ul{ padding:0 1rem 0.5rem 0;}
.videoLibraryBlk ul li{ 
	list-style-type:none; 
	padding:0 0; 
	margin:0 0; 
	float:left; 
	width:33%;
	line-height:inherit;
}
.videoLibraryBlk ul li a{ 
	display:block; 
	height:1.1rem;
	overflow:hidden; 
	padding:0 1rem 0 1rem;
	margin-bottom:10px;
	color:#333333;
}
.videoLibraryBlk ul li a:hover{ color: #e71e0f;}
.videoLibraryBlk ul li.active a{ color: #e71e0f;}
.videoLibraryBlk .tableBlk{ margin: 0px auto 20px auto; width:auto;}
.videoLibraryBlk .tableBlk .tabs li{width:auto;}
.videoLibraryBlk .tableBlk .tabs li a{ display:inline-block;height:inherit; overflow:inherit;margin-bottom:0;}
.videoLibraryBlk .tableBlk .tabs li a:hover{ text-decoration:none;}
.videoLibraryBlk .tableBlk.sortBy{ border:none; text-align:right; margin: 0px auto 10px auto; border-top:1px solid #bfbfbf; padding:0.75rem 0;}
.videoLibraryBlk .tableBlk.sortBy p{ float:left;line-height: 1.4117rem; padding:0.25rem 1rem 0 0;}
.videoLibraryBlk .tableBlk.sortBy ul{ float:right; border:none;}
.videoLibraryBlk .tableBlk.sortBy ul li a{ font-size:0.875rem; margin-bottom:0;}

.gridBlk ul{padding:0 0;margin:0 0;}
.gridBlk ul li{
	list-style-type:none;
	float:left;
	width:25%;
	padding:0 0 1rem 0;
	height:360px;
	overflow:hidden;
	transition: all 0.4s ease-in;
}
.gridBlk ul li a{ padding:0 0; margin: 0 1rem; height:inherit; overflow:inherit; color:#333333;}
.gridBlk ul li .type{
	display:block;
	height:16px;
	text-align:right;
	margin:0 0 5px 0;
}
.gridBlk ul>li>a{display:block;}
.gridBlk ul>li>a:hover{ text-decoration:none;}
.gridBlk ul>li>a:hover p{ color:#e71e0f; text-decoration:underline;}
.gridBlk ul li .imgCrop{
	text-align:center;
	overflow:hidden;
	height: 0;
	padding-top: 66.666%;
	position: relative;
	margin-bottom: 0.25rem;
	transition: all 0.125s ease-in;
}
.gridBlk .imgCrop img{
	display:inline-block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}
.gridBlk ul li .imgCrop .video-container{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}
.gridBlk ul li .time {
    height: 20px;
	overflow:hidden;
	font-size:0.875rem;
    color: #666;
	padding:0.25rem 0 0 0;
}
.gridBlk ul li p{
	display:block;
    padding: 0 0;
	line-height:24px;
	max-height:70px;
	font-size:14px;
	overflow:hidden;
}
.gridBlk ul li:hover .imgCrop{opacity:.6;}
.gridBlk ul li:hover p{text-decoration:none;color: #e71e0f;}

.faqBlk.guide{ padding-top:1rem;}
.guide .blk{
	display:block;
	border:none;
	float:left;
	position:relative;
}
.guide .type{
	padding:0.5rem 1.5rem 0.5rem 0.5rem;
	background-color:#ffffff;
	color:#333333;
	font-size:14px;
	border:1px solid #bfbfbf;
	width:140px;
	text-align:center;
}
.guide .type:after{
	display:block;
	content: "\f0d7";
    font-family: FontAwesome;
	left:inherit;
    right: 1rem;
    top: 6px;
    color: #333333;
    background-color: transparent;
    border-radius: 0;
    font-size: 1.25rem;
}
.guide .type.active, .guide .type.active:after{ color: #e71e0f;}
.guide .type.active{ border:1px solid #e71e0f;}
.guide .type.active:after{ content: "\f0d8";}
.guide .panel{ 
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
	background-color:#ffffff;
	color:#333333;
	border:1px solid #bfbfbf;
	position:absolute;
	left:0;
	top:36px;
	z-index:2;
	width:140px;
	font-size:0.875rem;
}
.guide .blk:nth-child(2) .panel, .guide .blk:nth-child(3) .panel{ width:260px;}
.guide .blk:nth-child(4) .panel{ width:200px; }
.guide .panel label{
	clear:both;
	display:block;
	float:none;
	height:inherit;
	line-height:inherit;
	min-height:1.5rem;
	margin: 0 0 0.25rem 0;
}
.guide .panel label span{ margin: 0 0 0 0; float:left;}


@media (max-width: 1500px){
.gridBlk ul li{ height:330px;}
}


@media (max-width: 1366px){
}


@media (max-width: 1200px){
.gridBlk ul li{ width:33.333%;}
}


@media (max-width: 980px){
.videoLibraryBlk ul li{ width:33.333%;}
.formBlk .supportType select+.blk{ margin-top: 8px;}
.formBlk .supportType .blk { margin-bottom: 8px; display: block;}
.formBlk .supportType label{ display: inline-block; min-width: 110px;}
}


@media (max-width: 768px){
.gridBlk ul li{ width:50%;}
.watchBlk { margin: 0 0 2rem 0;}
.watchBlk>.pull-left, .watchBlk>.pull-right{ width:100%;}
.watchBlk>.pull-right .subBlk{ margin: 0 0 0 0;}
.watchBlk>.pull-right .pull-left, .watchBlk>.pull-right .pull-right{ float:none;}
.subBlk{ margin: 0 0 1rem 0;}
.subBlk ul li{ float: left;}
.videoOnly .pull-left, .videoOnly .pull-right{ width:100%; float:none;}
.videoOnly .pull-left .video-container{ margin: 0 0 0.75em 0;}
}

@media (max-width: 600px){
.filterBlk .resources .blk{ display:block; clear:both; padding:0 1rem 1rem 0;}
.filterBlk .resources .blk br{ display:none;}
.filterBlk .resources .select{ min-width:260px;}
.filterBlk .resources .searchBlk{ padding: 0;}
.videoLibraryBlk ul li{ width:50%;}
.gridBlk ul li{ height:270px;}
.formBlk .supportType .blk { margin: 8px 0 0 0; display: block;}
.formBlk .supportType label{ display: block; min-width: inherit;}
.formBlk .supportType select, .formBlk .supportType input[type="text"]{ margin: 0 0 0 0;}
.bussinessConduct .formBlk { border-top: none;}
.bussinessConduct .formBlk .th { width: 100%; border-top: 1px solid #dfdfdf;}
.bussinessConduct .formBlk .tr:last-of-type .th { border-bottom:1px solid #dfdfdf;}
.bussinessConduct .formBlk .td { margin-bottom: 1rem; border-bottom: none;}
.sliderOnly{text-align: center;}
.sliderOnly .btn-primary {
    float: none;
    margin: 56px auto 0 auto;
    display: inline-block;
}
}


@media (max-width: 480px){
.filterBlk .resources .blk input[type="text"]+.btn-primary{ margin: 0.5rem 5px 0 0; margin: 0 5px 0 0;}
.videoLibraryBlk ul li{ width:100%;}
.gridBlk ul li{ width:100%; height:auto; padding:0 0 3.5rem 0;}
.gridBlk ul li a { padding: 0 0;}
.gridBlk ul li .imgCrop{ height: inherit;}
.gridBlk .imgCrop img{ max-height:inherit;}
.gridBlk ul li p { max-height: inherit;overflow: inherit;}
.sliderOnly { margin: 0 0 4rem 0;}
.sliderOnly .owl-theme .owl-dots { bottom: -40px;}
}

@media (max-width: 414px){
.formBlk .supportType input[type="text"] { width:100%;}
.owl-theme .owl-dots {
    width: 290px;
    margin-left: -145px;
}
}

.subBlk h3 {
	font-size: 20px;
	font-weight: bold;
}