﻿@charset "utf-8";


.home_main{ width: 100%; height: 550px; background: url(../images/home-main_L.webp) 80% top; background-repeat: no-repeat !important;}


.blocks{
	display: flex;justify-content:space-between
}
main.container{ display: block}
main .left_ad{width: 210px; margin-right: 50px; float: left}

main .blocks{ display: block;  width: calc(100% - 210px - 50px); float: right;}
main .blocks .part{width:calc(50% - 25px); position: relative; float: left}
main .blocks .part.left{ box-sizing: border-box; padding-bottom: 58px; margin-right: 50px}

main .left_ad .calcs{
	color: #466478;
	line-height: 1.55;
	font-size: 1.7em;
	margin-bottom: 15px;
}

main .left_ad .calcs .calc_nums{white-space:nowrap}
main .left_ad .calcs .calc_nums img{ display: inline; margin-right: -2px;}

main .left_ad a{
	display: block;
	margin-bottom: 10px;
	box-sizing: border-box;
	border: 1px solid #e0e5da;
	border-radius: 4px;
	overflow: hidden;
}

main .left_ad a:hover{
	box-shadow: 2px 2px 8px rgba(120,69,196,0.5)
}

 
main .blocks .part .title_box{
	margin-bottom: 23px;
	position: relative;
	border-bottom: 1px solid #b5b5b5;
	padding-bottom: 10px;
	box-sizing: border-box;
}

main .blocks .part .title_box:after{
	content:"";
	display: block;
	width: 100%;
	height: 12px;
	position: absolute;
	left: 0;
	bottom: -12px;
	background: url(../images/line-shadow.png) left top no-repeat;
	background-size: contain 
}

main .blocks .part .title_box a.more_btn{
	display: block;
	position: absolute;
	right: 0;
	color: #9f9f9f;
	font-size:1.2em;
	font-family: Tahoma, "Tahoma", Arial;
	padding-left: 17px;
	background: url(../images/home-btn-more-dot.png) 6px center no-repeat;
	padding: 3px 6px 3px 23px;
	border-radius: 4px;
	bottom: 11px;
}

main .blocks .part .title_box a.more_btn:hover{	
	background:#d0552e url(../images/home-btn-more-dot-hover.png ) 6px center no-repeat;
	color: #fff;
}

main .blocks .part .title_box .left{ 
	line-height: 1;
	padding-left:23px;padding-right: 62px;
	background: url(../images/home-title-dot.gif) 3px top no-repeat;
	background-size: contain}

main .blocks .part .title_box .left h2{
	display: block;
	color: #410c82;
	font-size: 2.4em;
	font-family: 微软雅黑;
    font-weight: bold;
	margin-bottom: 5px;
}

main .blocks .part .title_box .left p{
	color: #555;
	font-size: 1.3em;
}
main .blocks .part .last_news{ margin-bottom: 30px;}
main .blocks .part .last_news a{
	display: flex;
	justify-content: space-between;
}

main .blocks .part .last_news a .left{  width: 114px;}
main .blocks .part .last_news .right{ width: calc(100% - 114px); padding-left: 20px;}


main .blocks .part .last_news a .left .pic_box{
	box-sizing: border-box; border: 3px solid #dfdfdf; padding: 3px; display: block; margin-bottom: 6px;
}

main .blocks .part .last_news a:hover .left .pic_box{border: 3px solid #ec6941}

main .blocks .part .last_news a .left p{
	display: block; background: #7845c4; color: #fff;font-size: 1.2em; font-family: Tahoma, "Tahoma" ; line-height: 1.416;
	text-align: center; font-weight: bold;
}

main .blocks .part .last_news a:hover .left p{ background: #ec6941;}



main .blocks .part .last_news .right strong{ display:block; color: #410c82; line-height: 1.33; font-size: 2.1em; margin-bottom: 10px; max-width: 100% }

main .blocks .part .last_news a:hover  .right strong{ color:  #ec6941}

main .blocks .part .last_news .right time{ color: #899800; font-size: 1.5em; line-height: 1; margin-bottom: 16px; display: block}

main .blocks .part .last_news .right p{ display: block; font-size: 1.7em; line-height: 1.77; color: #555; font-weight: bold;}
main .blocks .part .more_news_li{ margin-bottom: 40px}
main .blocks .part .more_news_li a{ 
	display: flex; justify-content: space-between; line-height: 1.77; box-sizing: border-box; padding-left:16px; background: url(../images/home-news-dot.png) left center no-repeat;}

main .blocks .part .more_news_li a strong{ font-size:1.7em; color: #555; max-width: calc(100% - 105px)  }
main .blocks .part .more_news_li a:hover strong{ color: #ec6941}
main .blocks .part .more_news_li a time{ font-size:1.6em; color: #899800; width: 100px; text-align: right}

main .blocks .part .search_box{
	box-sizing: border-box;
	padding: 13px;
	text-align: center;
	background: #3a0080;
	border-radius: 4px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0
}

main .blocks .part .search_box form{
	display: flex;
	justify-content: center;
	align-content:center
}

main .blocks .part .search_box .i_search{ 
	color: #fff; font-size:2em; font-weight: bold; line-height: 1; padding-left: 30px; 
	background: url(../images/search-w.png) left center no-repeat; line-height: 32px;
	background-size: auto ;}


main .blocks .part .keyords{
	margin: 0 10px;
	border: 1px solid #a5a5a5;
	box-shadow:  0 0 2px inset #666;
	height: 32px;
	box-sizing: border-box;
	line-height: 30px;
	font-size: 1.6em;
	padding: 0 10px;
	width: calc(100% - 150px - 32px );
	max-width: 330px;
}


 .search_go{ 
	width:32px; height: 32px; line-height: 32px; text-align: center; color: #fff; 
	border-radius: 50%; border: 0px;
	 background: #713d9c url(../images/go.svg) center no-repeat;
	background-size: contain !important;
	/*background: -webkit-linear-gradient(top left, #6b4ca9 0%, #713d9c 100%);
	background: -o-linear-gradient(top left, #6b4ca9 0%, #713d9c 100%);
	background: linear-gradient(to bottom right, #6b4ca9 0%, #713d9c 100%);*/
	font-size: 1.7em;
	font-family: "arial";
	font-weight: bold;
	 cursor: pointer;
	 overflow: hidden;
	 text-indent: -999em;
	 position: relative
	}

/*.search_go:after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/go.svg) center no-repeat;
	background-size: contain;
}
*/
.search_go:hover{ background: #ec6941 url(../images/go.svg) center no-repeat;}


main .blocks .part .big_ad{
 	width: 100%;
	height: 0;
	padding-bottom: 18.737%;
	min-height: 85px;
	position: absolute;
	left: 0; top: 0;
	transform: translateY(calc(-100% - 40px));
	
 }

main .blocks .part .big_ad .ifo_txt{
	padding-left: 9em;
	position: absolute;
	left: 10px; top: 50%; transform: translateY(-50%)
}

main .blocks .part .big_ad .ifo_txt strong img{ width: auto; height: 1.9em; margin-bottom:0.5em;}
main .blocks .part .big_ad .ifo_txt p{ color: #333; margin-bottom: 0.5em; font-size: 1.35em;}
main .blocks .part .big_ad .ifo_txt a{ 
	display: inline-block; line-height: 1.7;  padding: 0px 10px 0px 23px; font-size: 1.2em; font-family: 'Lucida Sans Unicode','Lucida Grande', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'; 
	color: #fff; border-radius: 6px }

main .blocks .part .big_ad .ifo_txt a:hover{ }


.new_icon{
 	box-sizing: border-box;
	padding-right: 30px;
	position: relative;
	width: auto !important;
	display: inline-block !important
	
}

.new_icon:after{
	content: "";
	display: inline-block;
	width: 21px; height: 9px;
	background: url(../images/com-icon-new.gif) center no-repeat;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translate(0,-50%)
}

@media screen and (max-width: 1400px) {
.home_main{ width: 100%; height: 550px; background: url(../images/home-main_L.webp) 60% top;}
main .blocks .part .more_news_li a time{ font-size:1.4em; }
main .blocks .part .more_news_li a strong { font-size: 1.6em; width: calc(100% - 108px);}
	main .blocks .part .big_ad{ font-size: 95%}
}
@media screen and (max-width: 1200px) {
	.home_main{ width: 100%; height: 550px; background: url(../images/home-main_L.webp) 56% top;}

	main .blocks .part .more_news_li a time{ font-size:1.2em; width: auto   }
	main .blocks .part .more_news_li a strong { font-size: 1.5em; width: calc(100% - 85px) ; max-width: calc(100% - 85px);  }
	main .blocks .part .more_news_li a strong{}

	main .left_ad{ width: 100%; margin-right: 0; margin-top: 40px; }
 
	main .blocks{ width: 100%;   }
	main .left_ad a{ display: inline-block; border: 0; border-radius: 0; padding: 10px;}
	main .left_ad a:hover{ box-shadow: none}
	main .left_ad a:hover img{ box-shadow: 1px 1px 3px #ccc}
	main .left_ad a img{ width: 100%; height: auto; border-radius: 4px;}	
	
	.listshow .slick-prev, .listshow .slick-next{
		width: 40px; height: 40px; background-repeat: no-repeat  !important; background-position: center  !important; background-size: contain  !important; opacity: 0.5
	}	
	.listshow .slick-prev:before, .listshow .slick-next:before{ display: none}
	.listshow .slick-prev{ background-image: url(../images/h-left.svg) !important}
	.listshow .slick-next{ background-image: url(../images/h-right.svg) !important}
	.listshow .slick-prev:hover, .listshow .slick-next:hover { opacity: 1}
	
	main .blocks .part.left{ padding-bottom: 46px;}
	main .left_ad .calcs{ display: flex; justify-content: space-between}
	main .left_ad a{ margin-bottom: 0}
	main .blocks .part .big_ad{ font-size: 90%}

	
}

@media screen and (max-width: 990px) {
	.home_main{ height: 0; padding-bottom: 45%; background-position: 55% bottom; background-size: auto 125%}
	main .blocks .part .big_ad{ font-size: 85%}

 }
 
@media screen and (max-width: 768px) {
	main .blocks .part{
		width: 100%; margin-right: 0;
 		
	}
	main .blocks .part .search_box{
		position: relative; left: auto;
		bottom: auto;
		margin-bottom: 40px;
	}
	main .blocks .part.left{
		padding-bottom: 0;
		margin-right: 0
	}
	more_news_li{ margin-bottom: 0}
	main .left_ad{ margin-top: 0}
	
	main .blocks .part .big_ad{
 		position: relative;
		left: auto; top: auto;
		transform:none;
		margin-bottom: 40px;
		font-size: 100%
	 }
	
}

@media screen and (max-width: 500px) {
	main .blocks .part .big_ad{ font-size: 70%}
	main .blocks .part .search_box .i_search{ font-size: 1.5em}
	main .blocks .part .title_box .left h2 { font-size: 2em;}
	main .blocks .part .title_box .left p {font-size: 1.1em;}
	main .blocks .part .last_news a .left {width: 80px;}
	main .blocks .part .last_news .right {width: calc(100% - 80px);padding-left: 20px;}
	main .blocks .part .last_news .right strong { font-size: 1.8em; margin-bottom: 5px;   white-space:normal ; overflow: auto; text-overflow: none;}
	main .blocks .part .last_news .right time { font-size: 1.2em; margin-bottom: 8px;}
	main .blocks .part .last_news .right p { font-size: 1.4em; line-height: 1.5;}
	main .blocks .part .more_news_li.first{ padding-top: 6px; border-top: 1px dotted #ccc;}
	main .blocks .part .more_news_li a strong {font-size: 1.4em; white-space:normal ; overflow: auto; text-overflow: none;}
	main .blocks .part .more_news_li a{ background: url(../images/home-news-dot.png) left 10px no-repeat; padding-left: 13px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dotted #ccc;}
	main .blocks .part .more_news_li a time{ width: 80px;}
	main .left_ad .calcs{ font-size: 1.4em;}
	main .left_ad .calcs .calc_nums img{ width: 18px; height: auto;}
	main .blocks .part .big_ad .ifo_txt p{ margin-bottom: 0.85em}
	.new_icon:after{ top: 6px; transform: none}
}

/*框線動畫*/
@-webkit-keyframes line_out {
  0% { opacity: 1; width: 100%; height: 100%; left: 0; top: 0}
   100% { opacity: 0; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px}
   }

@keyframes line_out {
  0% { opacity: 1; width: 100%; height: 100%; left: 0; top: 0}
   100% { opacity: 0; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px}
 }
