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

body{ font-size:1em; margin:0; padding:0;font-family:"Century Gothic", Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;}
.container_div{max-height:1080px;}
.container_div:after{ display:block; content:''; clear:both;}
.col01{ float:left; width:68%; background: #e4e4e4;}
.col02{ float:right; width:32%;}

.col01 .row01{ height:15vh; display:table;}
.col01 .row01 .logo{ width:15%; display:table-cell; text-align:center; vertical-align:middle;}
.col01 .row01 .logo img{ width:90%;}
.col01 .row01 .notice{ width:85%; display:table-cell;}
.col01 .row01 .notice .white{ 
	background:#fff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-size:2.5em;
	line-height:5vh;
	vertical-align:middle;
	text-align:center;
	position:relative;
	margin-top:1vh;
	margin-bottom:1vh;	
	margin-right:0.5vh;
	color:#282828;
	padding: 1vh 2vh;
}
.slideText {
    position: relative;
    overflow: hidden;
    width: 100%;
    height:10vh;
}
.slideText ul, .slideText li {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
	height:10vh;

}
.slideText ul {
    position: absolute;
}
.slideText li {
    text-align: left;
	/*display: flex;
  	align-items: center;*/
	 width:100%;
	 display:table;
}
.cycle-carousel-wrap{ width:100%;}
#event_list_div{ height:85vh !important;}
/*.slideText li div{ position:relative; text-align:center;  width:100%; display:table;}*/
.col01 .row01 .notice .white h3{ padding:0; margin:0 ;width:100%; display:table; height:10vh; font-weight:400;}
.col01 .row01 .notice .white span{ display:table-cell; }
.col01 .row01 .notice .white span:first-child{ width:85%; vertical-align:middle;}
.col01 .row01 .notice .white span:last-child{ width:15%; vertical-align:bottom;}
.col01 .row01 .notice .white span.datetime{font-size:0.3em;  /*position:absolute; right:2%; bottom:2%; width: auto;*/}
.col01 .row01 .notice .white span.datetime b{background:url(../images/icon_clock.png) left center no-repeat; padding-left:1.5vh; background-size:auto 1.2vh;}

.col01 .row02{ height:85vh;}
.col01 .row02 .title{
	background:#2b3245;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	color:#fff;
	display:table;
	width:100%;
	height:7vh;
}
.col01 .row02 .title div{ display:table-cell; font-size:2em; text-align:center; vertical-align:middle;}
.col01 .row02 .title div:nth-child(1){ width:11%;}
.col01 .row02 .title div:nth-child(2){ width:25%;}
.col01 .row02 .title div:nth-child(3){ width:27%; position:relative;}
.col01 .row02 .title div:nth-child(3) span{
	background:#d80000;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	display:inline-block;
	color:#fff;
	position:absolute;
	top:-10%;
	font-size:0.7em;	
	padding: 1% 3% 1% 3%;
}

.col01 .row02 .title div:nth-child(4){ width:37%;}
.col01 .row02 .flip_div:nth-child(odd) .list{background:#f4f4f4;}
.col01 .row02 .flip_div:nth-child(even) .list{background:#fff;}
.col01 .row02 .manufacturing_list_container{height:78vh; overflow:hidden; position:relative;}
.col01 .row02 .flip_list{ }
.col01 .row02 h3{ font-weight:400; padding:0; margin:0; font-size:inherit;}
.col01 .row02 .flip_div{
	-webkit-perspective: 1600px;
	-moz-perspective: 1600px;
	-o-perspective: 1600px;
	perspective: 1600px;
	opacity:0;
}
.col01 .row02 .flip_div .list.active{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	  transition: transform 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	  transform-style: preserve-3d;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: center center;
	  transform-origin: center center;
	
	
	-webkit-transform: translateY( 0% ) rotateX( 360deg );
	-moz-transform: translateY( 0% ) rotateX( 360deg );
	-o-transform: translateY( 0% ) rotateX( 360deg );
	  transform: translateY( 0% ) rotateX( 360deg );
}

.col01 .row02 .list .item{height:13vh; display:table; width:100%; color:#3d3d3d; font-size:1.7em;}
.col01 .row02 .list .item .datetime{display:table-cell; width:11%; text-align:center; vertical-align:middle;}
.col01 .row02 .list .item .datetime div{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#e22a1b;
	color:#fff;
	display:inline-block;
	font-size:0.8em;
	text-align:center;
	position:relative;
	padding:5%;
	text-shadow:1px 1px 1px #830a00;
}
.col01 .row02 .list .item .datetime div:after{
	content:'';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1vh 0 1vh 2vh;
	border-color: transparent transparent transparent #e22a1b;
	position:absolute;
	right:-1.9vh;
	top:40%;
}
.col01 .row02 .flip_div:nth-child(odd) .item .datetime div{ background:#f25245;}
.col01 .row02 .flip_div:nth-child(odd) .item .datetime div:after{ border-color: transparent transparent transparent #f25245;}


.col01 .row02 .list .item .datetime div b{ display:block;font-size:1.5em;}
.col01 .row02 .list .item .no{display:table-cell;  width:25%; vertical-align:middle; font-size:1.4em;}
.col01 .row02 .list .item .no b{ 
	font-weight:400;
	font-size:0.8em;	
	background:#00afe1;
	color:#fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	padding:1% 2%;
	float:right;
	margin-right:3%;
}


.col01 .row02 .flip_div .item .no b.color1{ background:#00afe1;}
.col01 .row02 .flip_div .item .no b.color2{ background:#ea1b7c;}
.col01 .row02 .flip_div .item .no b.color3{ background:#26d90e;}

.col01 .row02 .list .item .desc{display:table-cell;  width:27%; vertical-align:middle;}
.col01 .row02 .list .item .remark{display:table-cell;  width:37%; text-align:center; vertical-align:middle;}
.col01 .row02 .list .item .remark b{ color:#ff0000; font-weight:400;}
.col02 .event_title{ background:url(../images/event_bg.png) center top no-repeat; height:15vh; color:#e22a1b; font-size:3.5em; display: flex;  align-items: center;  justify-content: center;}
.col02 .event_title b{ line-height:8vh; height:8vh; background:url(../images/event_title_img.png) left center no-repeat; background-size:8vh 8vh; padding-left:8.5vh; position:relative;}
.col02 .event_title b span{
	background: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    color: #d80000;
    position: absolute;
    top: 2%;
    font-size: 0.5em;
    padding: 0% 4% 1.5% 3%;
	font-weight:400;
	height:3vh;
	line-height:3vh
}
.col02 .event_list_container{height:85vh; overflow:hidden; position:relative;}
.col02 .list{}

.col02 .list .item{ background:#021036;height:14.166666vh; position:relative;}
.col02 .list .item:before{ display:block; height:2px; background:#243a75;  width:100%; content:''; top:0; position:absolute;}
.col02 .list .item .event_top{ padding:0 3%; height:10vh; display:table; width:94%; }
.col02 .list .item .event_top:after{ display:block; content:''; clear:both;}
.col02 .list .item .event_top .event_img{ width:15%;  display:table-cell; vertical-align:middle;}
.col02 .list .item .event_top .event_desc{ 
	width:85%; 
	display:table-cell; 
	font-size:1.5em; 
	color:#fff; 
	vertical-align:middle;
	
}
.col02 .list .item .event_top .event_desc span{
	overflow: hidden;   
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}
.col02 .list .item .event_top .event_img img{ height:5vh;}
.col02 .list .item .publish_date{background:#000a26;  height:5vh;  position:relative; padding-right:3%; }
.col02 .list .item .publish_date:before{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5vh 10vh 0 0;
	border-color: #021036 transparent transparent transparent;
	content:'';
	position:absolute;
	left:0;
}
.col02 .list .item .publish_date div{ margin-top:0.6vh; line-height:3vh; float:right; color:#8093c9; background:url(../images/icon_clock.png) left center no-repeat ; background-size:2.5vh 2.5vh; padding-left:3vh }
.col02 .list .item .publish_date b{ font-weight:400; color:#00b5d8}
.col02 h3{ font-weight:400; padding:0; margin:0;font-size:inherit;}
.col02 .flip_div{
	-webkit-perspective: 1600px;
	-moz-perspective: 1600px;
	-o-perspective: 1600px;
	perspective: 1600px;
	opacity:0;
}
.col02 .flip_div .item.active{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	  transition: transform 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	  transform-style: preserve-3d;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: center center;
	  transform-origin: center center;
	
	
	-webkit-transform: translateY( 0% ) rotateX( 360deg );
	-moz-transform: translateY( 0% ) rotateX( 360deg );
	-o-transform: translateY( 0% ) rotateX( 360deg );
	  transform: translateY( 0% ) rotateX( 360deg );
}

@media (max-width: 1440px) {
	.col01 .row01 .notice .white{ font-size:2.2em;}
	.col01 .row02 .title div{ font-size:1.3em;}
	.col01 .row02 .list .item{font-size:1.3em;}
	.col01 .row02 .list .item .no{font-size:1em;}
	.col01 .row02 .list .item .datetime div b{font-size:1em;}
	.col02 .event_title{font-size:2.5em;}
	.col02 .list .item .event_top .event_desc{font-size:1em;}
}
@media (max-width: 1024px) {
	.col01 .row01 .notice .white{ font-size:1.8em;}
	.col01 .row02 .title div{ font-size:1.0em;}
	.col01 .row02 .list .item{font-size:1.0em;}
	.col01 .row02 .list .item .no{font-size:0.8em;}
	.col01 .row02 .list .item .datetime div b{font-size:0.8em;}
	.col02 .event_title{font-size:2em;}
	.col02 .list .item .event_top .event_desc{font-size:0.8em;}
}
@media (max-width: 768px) {
}