.wow {
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;	
}

#articleInfo7 .youtube {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
#articleInfo7 .youtube #delay1 ,
#contact .fb #box1 ,
#contact .fb #box2 {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
    animation-name: fadeInLeft;
    -webkit-animation-name: fadeInUp;
}
#articleInfo7 .youtube .wow:nth-child(2) {
	margin: 0 0 0 1%;
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight;
}
#articleInfo7 .youtube .wow{
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}
#articleInfo7 .youtube p{
    text-align: center;
    font-size: 16px;
    line-height: 145%;
    margin-top: -10px;
}
#articleInfo7 .youtube .wow iframe {
	margin: 1px 0;
	height: 440px;
	width: 95%;
}

@media screen and (max-width:1280px) {
	#articleInfo7 .youtube .wow iframe {
		margin: 0px 0;
		height: 548px;
		width: 101%;
	}
}
@media screen and (max-width:980px) {
	#articleInfo7 {
    margin-top: 0px;
	}
}
@media screen and (max-width:640px) {
	#articleInfo7 .youtube .wow iframe {
		height: 280px;
		width: 101%;
	}
}
@media screen and (max-width:480px) {
	#articleInfo7 .youtube #delay1,
	#articleInfo7 .youtube #delay2{
    width: 100%;
    float: left;
	}
}
.info {padding: 10px 0%;position: inherit;}
.info .articleTitle{
    padding: 4px 14px 10px;
}
.left_side{padding: 10px 0% 30px;}

.left_side:before{
    content: '';
    width: 207px;
    height: 1px;
    background-color: #e6e6e6;
    position: absolute;
    transform: rotate(-45deg);
    left: -84px;
    top: 45px;
    z-index: 0;
}

@media (max-width: 960px) {
.left_side {
        width:50%;
        padding-right: 40px
    }
}

@media (max-width: 720px) {
.left_side {
        width:100%;
        padding-right: 0;
    }
}

.left_side em {
    padding: 3.5px 28.7px;
    color: #8f8f8f;
    background-color: #ededed;
    font-size: 17.75px;
    font-weight: 400;
    display: inline-block;
    font-family: 'Frank Ruhl Libre', serif;
    font-style: inherit;
}

.left_side h2 {
    margin-top: 0px;
    font-size: 22px;
    color: #999;
    font-family: "Noto Serif TC", serif;
    font-weight: 600;
    letter-spacing: 3px;
}

@media (max-width: 1090px) {
 .left_side em{
    text-align: center;
    display: block;
}
 .left_side h2 {
        font-size: 24px;
        text-align: center;
    }
}

@media (max-width: 960px) {
 .left_side h2 br {
        display:none
    }
}
#articleInfo7 {
	position: relative;
	overflow: hidden;
}

#articleInfo7 .photoBox {
	padding: 10px 23px;
	float: left;
	width: 48%;
	top: 50px;
	left: 0;
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInLeft;
}

#articleInfo7 .photoBox img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

#articleInfo7 .photoBox:hover img {
	opacity: 0.7;
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}



#articleInfo7 .info h3 {
	position: relative;
	line-height: 120%;
	letter-spacing: .1em;
	font-size: 15px;
	text-align: left;
	border-bottom: 1px solid #d6d6d6;
	color: #2e2e2e;
	-webkit-line-clamp: 1;
	margin-bottom: 0.6vw;
	padding: 4px 0px 10px;
}

#articleInfo7 .info:hover h3 {
	-moz-animation: animatedIcon 1s infinite linear;
	-ms-animation: animatedIcon 1s infinite linear;
	-o-animation: animatedIcon 1s infinite linear;
}

@keyframes animatedIcon { 
	0%{ padding: 40px 0;}
	50%{ padding: 20px 0 60px; }
	100%{ padding: 40px 0; }
}
@-o-keyframes animatedIcon { 
	0%{ padding: 40px 0;}
	50%{ padding: 20px 0 60px; }
	100%{ padding: 40px 0; }
}
@-webkit-keyframes animatedIcon { 
	0%{ padding: 40px 0;}
	50%{ padding: 20px 0 60px; }
	100%{ padding: 40px 0; }
}
@-moz-keyframes animatedIcon { 
	0%{ padding: 40px 0;}
	50%{ padding: 20px 0 60px; }
	100%{ padding: 40px 0; }
}
@-ms-keyframes animatedIcon { 
	0%{ padding: 40px 0;}
	50%{ padding: 20px 0 60px; }
	100%{ padding: 40px 0; }
}

#articleInfo7 .info p {
	font-size: 18px;
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight;
	font-weight: 100;
	letter-spacing: .1em;
	font-size: 20px;
	line-height: 200%;
}

#articleInfo7 .info article {
	line-height: 180%;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
	text-align: inherit;
}
#articleInfo7 .info li{margin-bottom:5px}
#articleInfo7 .info li a{display:block;background: #f5f5f5;text-align:center;color:#fff;padding:13px 0;transition:all linear .3s;border: 1px solid #a8a8a8;}
#articleInfo7 .info li:nth-child(even) a{background:#4e4e4e}
#articleInfo7 .info li a:hover,footer #footerCompany .sedc >div a:hover{opacity:.8}
#articleInfo7 .info li{margin-bottom:5px;margin-top: 10px;margin: 5px;list-style-type: disc;list-style-position: outside;padding-left: 10px;}
#articleInfo7 .info li a{color: #343434;}
#articleInfo7 .info li a:hover{color:#afb5b9}

#articleInfo7 .info ol{margin-top: 30px;padding-left: 16px;}
#articleInfo7 .info li a{color: #343434;}
#articleInfo7 .info li a:hover{color:#afb5b9}


/*table
*----------------------------------------------------------------------------*/

.table-container {width: 100%;overflow-y: auto;margin: 0px 0 .5em;-webkit-overflow-scrolling: touch;}
.table-container article{
    margin: 30px 0 0;
}
.table_brand {width: 100%;border-right: 1px #e6e6e6 solid;border-top: 1px #e6e6e6 solid;border-spacing: 0;}
.table_brand th, .table_brand td{border-left: 1px #e6e6e6 solid;border-bottom: 1px rgb(76 76 76 / 17%) solid;padding: 9px;font-weight: 400;}
.table_brand td a,.table_brand th a{
    line-height: 140%;
}
.table_brand td.title0{width: 200px;}
.table_brand td ul {
    list-style: disc outside;
    padding-left: 30px;
    display: inherit;
    margin-bottom: 20px;
}
.table_brand td table{
    margin: 10px;
    width: 40%;
}
.table_brand tr th:nth-child(1){font-weight:400;}
.table_brand td:nth-child(1){background-color: rgb(241 241 241 / 60%);}
.table_brand tr tr:nth-child(odd){background-color: #d4d4d4;}
.table_brand td.title{
}
.table_brand tr th b{font-weight: 400;color: #da1028;vertical-align: top;}
.table_brand td.alt{ text-align:left;}



#articleInfo7 .singleArea {
    position: relative;
    z-index: 1;
    padding: 30px 0px 10px;
}

#articleInfo7 .singleArea .Img {
    width: 100%;
    height: 340px;
    background-size: cover;
    background-position: center center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#articleInfo7 .singleArea .Img h2 {
    font-family: "Noto Serif TC", serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.5px;
    width: 100%;
    text-align: center;
    line-height: 200%;
}
@media (max-width: 800px) {
#articleInfo7 .singleArea .Img h2 {
        font-size:24px
    }
}

#articleInfo7 .singleArea .Img h2 br {}
#articleInfo7 .singleArea .Img b a{
    background-color: rgb(46 46 46 / 63%);
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 1.5px;
    padding: 15px 50px;
    margin: 0px 0 0;
    display: inline;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin-top: 40px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#articleInfo7 .singleArea .Img b a.more:hover {
    background-color: rgb(0 51 160 / 63%);
}

@media (max-width: 1180px) {
#articleInfo7 .singleArea .Img b a.more {
        margin-top:0px
    }
}

@media (max-width: 1100px) {
#articleInfo7 .singleArea .Img b a.more {
        width:100%;
     }
}

@media (max-width: 480px) {
#articleInfo7 .singleArea .Img b a.more {
        padding: 15px 10px;
    }
}
#articleInfo7 .singleArea .Img b a.more i {
    width: 20px;
    height: 20px;
    color: #fff;
    border: 1px solid #fff;
    background-color: transparent;
    border-radius: 99em;
    position: absolute;
    right: 11px;
    top: 50%;
    margin-top: -10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    padding-left: 2px;
    font-style: normal;
}
@media (max-width: 560px) {

    #articleInfo7 .singleArea .Img b a.more i{    display: none;}
}
#AB003,#AB004 {
    position: relative;
    padding: 10px 2%;
    margin: 40px 0 0;
}

.clearfix .item2 {
    position: relative;
    padding-top: 26px;
    padding-bottom: 46px;
    padding-left: 25px
}

@media (max-width: 500px) {
    .clearfix .item2 {
        padding-left:0;
        padding-bottom: 0
    }
}

.clearfix .item2:before {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #e2e2e2
}

@media (max-width: 500px) {
    .clearfix .item2:before {
        display:none
    }
}

.clearfix .item2:after {
    content: '';
    width: 3px;
    height: 0px;
    background-color: #f5d952;
    position: absolute;
    left: 0;
    top: 0
}

@media (max-width: 500px) {
   .clearfix .item2:after {
        display:none
    }
}

.clearfix .item2:hover .second {
    background-color: #f5d952;
}

.clearfix .item2:hover h3 a {
    color: #0cb59b
}

.clearfix .item2:hover:after {
    height: 100%
}

.clearfix .item2 .TxtBox address{
    font-style: inherit;
    padding: 20px 10px 0;
}
.clearfix .item2 .TxtBox ul.historyList {
    list-style: disc outside;
    padding-top: 20px;
    padding-left: 30px;
    display: inherit;
    margin-bottom: 20px;
}
.clearfix .item2 .TxtBox p{
    padding-top: 2px;
    padding-left: 30px;
    color: #727272;
}
.clearfix .subBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.clearfix .subBox .second {
    font-size: 14px;
    color: #fff;
    width: 70px;
    background-color: #245fdf;
    border-radius: 99em;
    padding: 3px 0;
    text-align: center;
}

.clearfix .subBox h3 {
    font-size: 18px;
    font-weight: 400;
    color: #245fdf;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    letter-spacing: 1.5px;
}

.clearfix .subBox h3 a {
    color: #0cb59b
}

.clearfix .subBox h3:before {
    content: '';
    width: 1px;
    height: 18px;
    background-color: #d0d0d0;
    display: inline-block;
    margin: 0 15px
}
.clearfix .item2 .TxtBox ul {
    list-style: disc outside;
    padding: 30px 0 0;
    padding-left: 30px;
    display: inherit;
    margin-bottom: 20px;
}
.clearfix .item2 .TxtBox ul.historyList:before {
    content: '';
    position: absolute;
    bottom: 48%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(137,181,173,0.18) 0%,rgb(222 222 222) 10%,rgb(229 229 229) 51%,rgb(223 223 223) 51%,rgb(214 214 214) 90%,rgba(137,181,173,0.18) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89b5ad', endColorstr='#89b5ad',GradientType=1 );
}


.clearfix .item2 .TxtBox ul.historyList .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 288px;
}

.clearfix .item2 .TxtBox ul.historyList li {
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    width: calc((100%/3) - 3px);
}



.clearfix .item2 .TxtBox ul.historyList .item:hover .hoverBox {
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.clearfix .item2 .TxtBox ul.historyList .item:before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #245fdf;
    border-radius: 99em;
    position: absolute;
    left: 50%;
    bottom: 28%;
    margin-left: -5px;
    margin-top: -5px;
    z-index: 8;
    transition: all .5s ease;
    border: 2px solid #d7d7d7;
}

.clearfix .item2 .TxtBox ul.historyList .item:hover:before{
    background-color: #fff;
    border: 2px solid #245fdf;
}

.clearfix .item2 .TxtBox ul.historyList .item:after {
    content: '';
    width: 24px;
    height: 24px;
    background-color: #dbe3f4;
    border-radius: 99em;
    position: absolute;
    left: 50%;
    bottom: 26%;
    margin-left: -11px;
    margin-top: -11px;
    z-index: 7;
    opacity: 0;
    transition: all .5s ease;
}

.clearfix .item2 .TxtBox ul.historyList .item:hover:after{
    opacity: 1;
}

.clearfix .item2 .TxtBox ul.historyList .item .line {
    width: 1px;
    height: 50px;
    background-color: #e2e2e2;
    position: absolute;
    left: 50%;
    bottom: 32%;
}

.clearfix .item2 .TxtBox ul.historyList .item h3 {
    position: absolute;
    bottom: 0;
    font-size: 15px;
    letter-spacing: 3px;
    font-style: inherit;
    color: #828282;
    padding: 0 10px;
    font-weight: 500;
}

.clearfix .item2 .TxtBox ul.historyList .item h3 span{
    color:#373737;
    font-size: 14px;
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 400;
}

.clearfix .item2 .TxtBox ul.historyList .item .second {
    width: 120px;
    height: 110px;
    border: 3px solid #f2f4f9;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 99em;
    text-align: center;
    font-size: 34px;
    color: #245fdf;
    font-family: 'Playfair Display', serif;
    position: absolute;
    top: 2px;
    padding: 30px 0 0;
}
.clearfix .item2:hover  .TxtBox ul.historyList .item .second{
    background-color: #f7f7f7;
}
.clearfix .item2 .TxtBox ul.historyList .item .second .person {
    font-size: 14px;
    text-align: center;
    font-family: 'Noto Sans TC';
    color: #373737;
    font-weight: 300;
}




/*listBox2
*----------------------------------------------------------------------------*/

.info ul.listBox2{
        margin-bottom: 30px;
    }
.info ul.listBox2 li {
        padding: 15px 5px;
        border-bottom: 3px double #ccc;
        -webkit-transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }
.info ul.listBox2 li:hover{
        padding: 15px;
    }
.info ul.listBox2 li h3 a{
        position: relative;
        padding: 10px 0;
        color: #000;
        cursor: pointer;
        font-size: 20px;
        font-weight: 300;
    }
 .info ul.listBox2 li h3{
        color: #1b1b1b;
        font-weight: 400;
        font-size: 20px;
    }
.info ul.listBox2 li h3 i{
        color: #222;
        font-size: 22px;
        margin-right: 10px;
        display: inline-block;
        position: relative;
        z-index: 1;
    }
.info ul.listBox2 li h3 i::after{
        content: "";
        width: 20px;
        height: 20px;
        background: #fde400;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 15px);
        left: calc(50% - 18px);
        z-index: -1;
    }
.info ul.listBox2 li:hover h3 a{
        color: #c30e22;
    }
.info ul.listBox2 li .txtExp{
      font-size: 13px;
      color: #555;
    }

/**********響應式**********/
@media (max-width: 960px){
.info ul.listBox2 li:hover{
        padding: 15px 5px;
    }
}


/*listBox3
*----------------------------------------------------------------------------*/
ul.listBox3 {
    overflow: hidden;
    position: relative;
     padding: 20px 0 15px;
    z-index: 1;
}
ul.listBox3 li {
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	width: calc((100%/4) - 4px);
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
ul.listBox3 li:hover {
    padding: 15px 0 0;
}
ul.listBox3 li h3{text-align:center;}

ul.listBox3 li h3 a{
    margin: 0 10px;
    color: #4b4b4b;
}
ul.listBox3 li h3 i{
    position: relative;
    margin: 20px auto 15px;
    box-sizing: border-box;
    text-align: center;
    font-size: 35px;
    color: #222;
    margin-right: 0px;
    display: inline-block;
    position: relative;
    z-index: 1;
    }
ul.listBox3 li h3 i::after{
        content: "";
        width: 50px;
        height: 50px;
        background: #fde400;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 35px);
        left: calc(50% - 35px);
        z-index: -1;
    }




/*item2
*----------------------------------------------------------------------------*/

#articleInfo16 .item2 {
    margin-bottom: 50px
}

#articleInfo16 .item2 h3 {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #245fdf;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 7px;
}

#articleInfo16 .item2 h3:before {
    content: '';
    margin-right: 15px;
    width: 40px;
    height: 1px;
    background-color: #245fdf;
    display: block;
}


#articleInfo16 .item2 ul li{
    margin-bottom: 30px;
}




/************ = 適應性 = ************/
/* +width:768 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#articleInfo7 {
		position: relative;
		overflow: hidden;
	}
	#articleInfo7 .photoBox {
		width: 100%;
		padding: 10px 0px;
	}
	#articleInfo7 .info {
		position: initial;
		margin-left: 0;
		padding: 0px;
		float: left;
		width: 100%;
	}
	#articleInfo7 .info h3 {
		left: 0;
		text-align: initial;
		position: inherit;
		font-size: 15px;
		line-height: 160%;
	}
.table_brand td table{
    margin: 10px;
    width: 94%;
}
}
@media screen and (max-width: 768px) {
	.clearfix .item2 .TxtBox ul.historyList:before{
    display: none;
}
.clearfix .item2 .TxtBox ul.historyList{
    padding-top: 20px;
    padding-left: 0;
}
.clearfix .item2 .TxtBox ul.historyList li{
    width: 100%;
}
.clearfix .item2 .TxtBox ul.historyList .item{
    height: 246px;
    margin: 15px 0 30px;
}
.clearfix .item2 .TxtBox ul.historyList .item .second{
    width: 80px;
    height: 100px;
    padding: 10px 0 0;
}
.clearfix .item2 .TxtBox ul.historyList .item h3{
    margin: 30px 0 0;
}
.clearfix .item2 .TxtBox ul.historyList .item .line{
    height: 25px;
    bottom: 42%;
}
.clearfix .item2 .TxtBox ul.historyList .item:before{
    bottom: 38%;
}
ul.listBox3 li {
	width: calc((100%/2) - 4px);
}
}

/* +width:480 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	#articleInfo7 .info {

margin-top: 0;

padding: 0px 0px;

}
	#articleInfo7 .info h3 {
		padding: 0px 0 10px;
		text-align: left;
	}
	#articleInfo7 .info article {
		margin-left: 0;
	}
	@keyframes animatedIcon { 
		0%{ padding: 20px 0;}
		50%{ padding: 0 0 40px; }
		100%{ padding: 20px 0; }
	}
	@-o-keyframes animatedIcon { 
		0%{ padding: 20px 0;}
		50%{ padding: 0 0 40px; }
		100%{ padding: 20px 0; }
	}
	@-webkit-keyframes animatedIcon { 
		0%{ padding: 20px 0;}
		50%{ padding: 0 0 40px; }

		100%{ padding: 20px 0; }
	}
	@-moz-keyframes animatedIcon { 
		0%{ padding: 20px 0;}
		50%{ padding: 0 0 40px; }
		100%{ padding: 20px 0; }
	}
	@-ms-keyframes animatedIcon { 
		0%{ padding: 20px 0;}
		50%{ padding: 0 0 40px; }
		100%{ padding: 20px 0; }
	}
.table_brand td.title0{width: 120px;}
ul.listBox3 li {
	width: calc((100%/1) - 4px);
}
}