@charset "utf-8";
/* CSS Document */
*{-webkit-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;font-family: "微軟正黑體";}
.pure-g [class*=pure-u], .pure-g{font-family: "微軟正黑體";letter-spacing: 0px;}
body{margin:0;}
a {text-decoration: none;}
ul {list-style: none;  margin: 0;  padding: 0;}
img { max-width: 100%;}
button:focus, input:focus, select:focus, textarea:focus {
  outline: none; }
#tinymce {  background: none; }
#container{	width:100%;	margin:0 auto;}
.nodata{
	text-align: center;
	color: #000;
	font-size: 1em;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.nodata span{
	padding: 5em;
	width: 100%;
}
main{
	overflow: hidden;
	position: relative;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    margin: 0px;
    padding: 0;
    -webkit-animation: slowtop 0.6s linear;
    -moz-animation: slowtop 0.6s linear;
    -ms-animation: slowtop 0.6s linear;
    -o-animation: slowtop 0.6s linear;
    animation: slowtop 0.6s linear;
}
main > div{
	width: 100%;
}

/*language*/
.language{
	display: block;
	font-size: 14px;
}
.language a{
	position: relative;
	padding: 0px 10px;
    left: 71%;
}
.language a:first-child{
	border-right: 1px #3798CD solid;
}
.language a span{
	color: #3798CD;
}
.mob_language{
	display: none;
}
/*header*/
header {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
    -ms-align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0;
    z-index: 99;
    top: 0;
	-webkit-animation: eimg 0.5s linear;
    -moz-animation: eimg 0.5s linear;
    animation: eimg 0.5s linear;
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.headerbox{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	z-index: 99;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	-ms-align-items: flex-start;
	-o-align-items: flex-start;
	align-items: flex-start;
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-start;
	-o-justify-content: flex-start;
	justify-content: flex-start;
}
.logo {
	padding: 40px 0 35px;
	position: relative;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	vertical-align: top;
	text-align: center;
}
.logo img{
	max-width: 380px;
}
.logo>a{
	font-size: 25px;
	font-weight:900;
}

/*Banner*/
.bannerbox{
	margin: 0 auto 30px;
}
#banner {
	position: relative;
	overflow: hidden;
	z-index: 99;
}
#banner .img {
	white-space: nowrap;
	position: absolute;
}
#banner .img img {
	vertical-align: top;
	margin: 0px -1.5px;
}
#banner_control {
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
	z-index: 100;
}
#banner_control img {
	width: 21px;
}
#banner #banner_control span {
	cursor: pointer;
	padding: 0 10px;
}
#banner #banner_control span img:nth-child(2) {
	display: none;
}
#banner #banner_control span img:nth-child(1) {
	display: inline-block;
}
#banner #banner_control span:active img:nth-child(1),
#banner #banner_control span.now img:nth-child(1) {
	display: none;
}
#banner #banner_control span:active img:nth-child(2),
#banner #banner_control span.now img:nth-child(2) {
	display: inline-block;
}
/*Banner End*/
/*menu*/
nav{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
}
header .navbox{
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	vertical-align: top;
	text-align: center;
	padding: 0;
}
header .hnav .mul {
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flex;
	display: -o-inline-flex;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
    margin: 0;
    order: 1;
}
header .hnav .mul > li{
	position: relative;
	padding: 0px;
	margin: 0 0em 0em;
}
header .hnav .mul > li::after{
	content: '';
	width: 2px;
	height: 0px;
	position: absolute;
	bottom: -1px;
	left:50%;
	transform: translate(-50%);
	display: inline-block;
	background-color: #0F6DB5;
	-webkit-transition: .5s ease;
	transition: .5s ease;
}
header .hnav .mul > li:hover::after{
	content: '';
	width: 1px;
	height: 10px;
	position: absolute;
	bottom: -1px;
	left:50%;
	transform: translate(-50%);
	display: inline-block;
	background-color: #0F6DB5;
}
header .hnav .mul li a > b{
	display: block;
	vertical-align: top;
	position: relative;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
}
header .hnav .mul li a > span{
	display: block;
}
.hnav .mli > a {
	padding: 15px 4em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
	color: #656364;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	position: relative;
	text-transform:capitalize;
	word-break: normal;
	cursor: pointer;
	vertical-align: top;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}
.hnav .mli > a:hover, .hnav .mli.has_sub_btn:hover > a{
	color: #3E89C3;
}
.hnav .mli .sul {
    position: absolute;
    z-index: 999;
    width: 60%;
    display: none;
    cursor: pointer;
    left: 20%;
    padding: 0;
    background-color: #3798CD;
}
.hnav .mli:hover .sul{
	display: block;	
}
.hnav .sli {
    width: 100%;
    border-top: 1px #fff solid;
    border-bottom: 1px #fff solid;
}
.hnav .sli a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 7px 10px;
    font-size: 1em;
    color: #fff;
}
.hnav .sli:first-child{
	border-top: none;
	border-bottom: 1px #fff solid;
}
.hnav .sli:last-child{
	border-top: 1px #fff solid;
	border-bottom: none;
}
.hnav .sli a:hover{
	background: #0F6DB5;
}
.menu-trigger {
   display: none;
 }

/*index*/
.index .index-box{
	background-image: url('../images/website_image/about-bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}
.index .index-box .index-about{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    padding: 70px 12% 79px 11%;
}
.index .index-box .index-about .index-about-left{
	width: 55%;
}
.index .index-box .index-about .index-about-left .index-about-title img{
	max-width: 140px;
}
.index .index-box .index-about .index-about-left .index-about-info p{
	line-height: 30px;
	font-family: '微軟正黑體';
	font-size: 14px;
}
.index .index-box .index-about .index-about-right{
	width: 45%;
}
.index .index-box .index-about .index-about-right img{
	width: 100%;
}

/*index-product*/
.iproduct_box{
    padding: 0;
    overflow: hidden;
    width: 83.2%;
    margin: 55px auto;
}
.iproduct_box .iproduct_title{
	text-align: center;
	padding: 0px 2.5px;
	color: #0F6DB5;
	padding-bottom: 8px;
}

@media screen and (max-width: 768px) 
{
	.iproduct_box .iproduct_title
	{
		padding: 0px 3.8vw;
	}
}

@media screen and (max-width: 500px) 
{
	.iproduct_box .iproduct_title
	{
		padding: 0px 2vw;
	}
}


.iproduct_box .iproduct_title .iproduct_title_en span{
	font-weight: bold;
	font-family: "Times New Roman";
	font-size: 35px;
	color: #0F6DB5;
}

.iproduct_box .iproduct_title .iproduct_title_en span b
{
	color: #3798cd;
	font-family: "Times New Roman";
	font-size: 35px;
}


.iproduct_box .iproduct_title .iproduct_title_tw
{
	position: relative;
}

.iproduct_box .iproduct_title .iproduct_title_tw::after
{
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    background: #0F6DB5;
    width: 100%;
    height: 1px;
    z-index: -1;
}

.iproduct_box .iproduct_title .iproduct_title_tw span{
	display: block;
	position: relative;
	font-weight: bold;
	font-family: "微軟正黑體";
	font-size: 20px;
	color: #0F6DB5;
	line-height: 30px;
	letter-spacing: 3px;
	width: 140px;
    margin: auto;
    background: #FFFFFF;
}
/*.iproduct_box .iproduct_title .iproduct_title_tw span::before,.iproduct_box .iproduct_title .iproduct_title_tw span::after{
	content: '';               
    position: absolute;         
    top: 50%;
    background: #0F6DB5;      
    width: 40%;
    height: 1px;
}*/
/*.iproduct_box .iproduct_title .iproduct_title_tw span::before{
	right: 60%;
}
.iproduct_box .iproduct_title .iproduct_title_tw span::after{
	left: 60%;
}*/
.iproduct_box .iproduct_title img{
	max-width: 140px;
}
.iproduct{
	width: 100%;
	display: flex;
}
.ipbox{
	margin: 0px;
	padding: 0px;
	width: 100%;
	/*text-align: left;*/
	display: flex;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}
.ipbox_top{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 100%;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.ipbox_center{
	width: 100%;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flex;
	display: -o-inline-flex;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.iproduct .ipbox .listbox {
    display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    padding-top: 60px;
}
.iproduct .ipbox .listbox .list {
    width: 28%;
    position: relative;
    margin: 0px 2vw;
    margin-bottom: 4vw;
    padding: 20px;
    color: #727171;
    font-size: 16px;
    font-weight: bolder;
    border: 2px solid #3798CD;
    overflow: hidden;
}
.iproduct .ipbox .listbox .list:not(:nth-child(3n)) {
	/* margin-right: 0.5vw; */
}
.iproduct .ipbox .listbox .list:hover{
	color: #000;
}
.iproduct .listbox a.list:hover .showbox img{
	-webkit-transform : scale(1.1);
	-ms-transform : scale(1.1);
	transform : scale(1.1);
	opacity: 0.7;
}
.test2{
	overflow: hidden;
	display: block;
	opacity: 1;
	width: 100%;
	margin: 0 auto;
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}
.showbox {
	width: 100%;
	height: 13vw;
	position: relative;
	padding: 0px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
}
.iproduct .listbox .list .pro_name{
    display: block;
    line-height: 1em;
    padding: 20px 0px;
    /*min-height: 4em;*/
    width: 100%;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    font-size: 14px;
}
.ipbox_center .more{
	margin: 0px 0px 28px;
}



/*product-list*/


.ipbox aside
{
	width: 15%;
	padding-top: 60px;
	margin-right: 4vw;
}




@media screen and (max-width: 1024px) 
{
	.ipbox aside 
	{
	    width: 25%;
	    padding-top: 77px;
	    margin-right: 4vw;
	}
}

@media screen and (max-width: 768px) 
{
	.ipbox 
	{
	    flex-wrap: wrap;
	}

	.ipbox aside 
	{
	    width: 400px;
	    padding-top: 25px;
	    padding-bottom: 10px;
	    margin-right: 0;
	}
}

@media screen and (max-width: 500px) 
{

	.ipbox aside 
	{
	    width: 95%;
	}
}



.ipbox aside div
{
	position: relative;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 5px;
    color: #0f6db5;

}



.ipbox aside div::before
{
	content: '';
    position: absolute;
    background: url('../images/website_image/pro_aside_left.png')no-repeat center center;
    background-size: 100%;
    width: 4.5px;
    height: 25px;
    left: 0px;
    top: 0px;
}


.ipbox aside div::after
{
	content: '';
	position: absolute;
	background: url('../images/website_image/pro_aside_right.png')no-repeat center center;
	background-size: 100%;
    width: 4.5px;
    height: 25px;
	right: 0px;
	top: 0px;
}

aside>ul
{
	font-size: 14px;
    padding-left: 22px;
    padding-top: 10px;
}

aside>ul>li
{
	padding: 5px;
    padding-left: 13px;
    position: relative;
    cursor: pointer; 
}

aside>ul>li::before
{
	content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: url('../images/website_image/pro_aside_li.png')no-repeat center center;
    background-size: 100%;
    top: 12px;
    left: 0;

}




aside>ul>li>ul
{
	padding: 10px 0px;
	padding-left: 12px;
	display: none;
}

aside>ul>li>ul>li
{
	padding: 3px 0px;
}

aside>ul>li>ul>li>a
{
	color: #9fa0a0;
	transition: .5s;
}

aside>ul>li>ul>li>a:hover
{
	color: #3798cd;
}

@media screen and (max-width: 768px) 
{
	.ipbox aside div 
	{
	    font-size: 18px;
	}

	aside>ul 
	{
	    font-size: 16px;
	    padding-left: 30px;
	}

	aside>ul>li 
	{
	    padding-left: 20px;
	}

	aside>ul>li>ul>li 
	{
	    padding: 5px 0px;
	}

}

@media screen and (max-width: 500px) 
{
	aside>ul 
	{
	    padding-left: 10vw;
	}

}




.ipbox aside .aside_btn
{
	display: none;
}


@media screen and (max-width: 768px) 
{
	.ipbox aside .aside_btn
	{
		display: inline-block;
	}

	.ipbox aside .aside_btn img
	{
		margin: -4px 0px;
    	margin-left: 5px;
	}
}









.ipbox_center2 
{
    width: 80%;
}


@media screen and (max-width: 1024px) 
{
	.ipbox_center2 
	{
	    width: 70%;
	}
}

@media screen and (max-width: 768px) 
{
	.ipbox_center2 
	{
	    width: 100%;
	}
}


.iproduct .ipbox .listbox .list2 {
    width: 25%;
    position: relative;
    margin: 0 3.8vw;
    margin-bottom: 4vw;
    padding: 20px;
    color: #727171;
    font-size: 16px;
    font-weight: bolder;
    border: 2px solid #3798CD;
    overflow: hidden;
}
.iproduct .ipbox .listbox .list2:not(:nth-child(3n)) {
	margin-right: 0.5vw;
}
.iproduct .ipbox .listbox .list2:hover{
	color: #000;
}
.iproduct .listbox a.list2:hover .showbox2 img
{
	-webkit-transform : scale(1.1);
	-ms-transform : scale(1.1);
	transform : scale(1.1);
	opacity: 0.7;
}


.iproduct .listbox .list2 .pro_name{
    display: block;
    line-height: 1em;
    padding: 20px 0px;
    /*min-height: 4em;*/
    width: 100%;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    font-size: 14px;
}





.showbox2
{
	width: 100%;
	height: 10vw;
	position: relative;
	padding: 0px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
}

@media screen and (max-width: 1024px) 
{
	.showbox2
	{
		height: 17vw;
	}
}

@media screen and (max-width: 768px) 
{
	.showbox2
	{
		height: 28vw;
	}
}

@media screen and (max-width: 500px) 
{
	.showbox2
	{
		height: 62vw;
	}
}




@media screen and (max-width: 1024px) 
{
	.iproduct .ipbox .listbox .list2:not(:nth-child(3n)) 
	{
	    margin: 20px 2%;
	}

	.iproduct .ipbox .listbox .list2 
	{
	    width: 45%;
	    margin-bottom: 30px;
	    margin: 20px 2%;
	}
	
}


@media screen and (max-width: 500px) 
{
	.iproduct .ipbox .listbox .list2
	{
	    width: 100%;
	}
	
}








/*product內頁*/

.ipbox_center2 .lists_pro2
{
	padding-top: 60px;
}

@media screen and (max-width: 1024px)
{
	.ipbox_center2 .lists_pro2
	{
		padding-top: 75px;
	}
}

@media screen and (max-width: 768px)
{
	.ipbox_center2 .lists_pro2
	{
		padding-top: 25px;
	}
}




.ipbox_center2 .lists_pro2 .pro_top
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}







.ipbox_center2 .lists_pro2 .pro_top .main_pic
{
	width: 40%;
    margin-right: 4vw;
}

.ipbox_center2 .lists_pro2 .pro_top .main_pic .big_pic
{
	width: 100%;
}

.ipbox_center2 .lists_pro2 .pro_top .main_pic .big_pic img
{
	
}

.ipbox_center2 .lists_pro2 .pro_top .main_pic ul
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    padding-top: 10px;
}

.ipbox_center2 .lists_pro2 .pro_top .main_pic ul li
{
	width: 21%;
    margin: 5px 0.5vw;
}




.ipbox_center2 .lists_pro2 .pro_top .pro_data
{
	width: 55%;
}

.ipbox_center2 .lists_pro2 .pro_top .pro_data .pro_name2
{
	font-size: 18px;
    font-weight: 600;
    color: #595757;
}

.ipbox_center2 .lists_pro2 .pro_top .pro_data .pro_name2 img
{
	width: 20px;
    margin: -7px 0px;
    margin-right: 5px;
}





@media screen and (max-width: 600px)
{
	.ipbox_center2 .lists_pro2 .pro_top 
	{
	    
	    flex-wrap: wrap;
	}


	.ipbox_center2 .lists_pro2 .pro_top .main_pic 
	{
	    width: 90%;
	    margin-right: 0;
	    margin: 0 auto;
	    margin-bottom: 15px;
	}
	.ipbox_center2 .lists_pro2 .pro_top .pro_data 
	{
	    width: 100%;
	}
}










.ipbox_center2 .lists_pro2 .pro_text2
{
	padding-top: 30px;
}


.ipbox_center2 .lists_pro2 .pro_text2 .pro_title2
{
	width: 95px;
    font-weight: 600;
    background: #3798cd;
    color: #FFFFFF;
    padding: 3px 0px;
    padding-left: 15px;
    position: relative;
}

.ipbox_center2 .lists_pro2 .pro_text2 .pro_title2::before
{
	content: '';
	position: absolute;
	width: 5px;
	height: 100%;
	left: 0;
	top: 0;
	background: #0f6db5;

}



.ipbox_center2 .lists_pro2 .pro_text2 .pro_content
{
	font-size: 14px;
    line-height: 25px;
    color: #595757;
    padding-left: 15px;
}




@media screen and (max-width: 600px)
{
	.ipbox_center2 .lists_pro2 .pro_text2 
	{
	    padding-top: 50px;
	}
}










/*more*/
.more a{
	font-weight: bold;
	font-family: "Times New Roman";
	font-size: 20px;
	text-decoration: none;
	color: #3798CD;
	border: 1px solid #3798CD;
	padding: 5px 36px;
    border-radius: 30px;
    transition: .5s;
}

.more a:hover
{
	background: #3798CD;
	color: #FFFFFF;
}
.more{
	text-align: center;
    margin: 30px 0;
}

/*about*/
.index .index-box2
{
	background: url('../images/website_image/about-bg2.png')no-repeat left bottom;
    background-size: 500px;
}


.index .index-box2 .index-info{
	display: flex;
	padding: 60px 130px;
}
.index .index-box2 .index-info .index-info-right{
	width: 60%;
    margin-right: 8vw;
}
.index .index-box2 .index-info .index-info-right .index-info-title{
	font-weight:bold;
	padding-bottom: 10px;
	border-bottom: 1px #aaa solid;
}
.index .index-box2 .index-info .index-info-right .index-info-title span{
	display: block;
	color: #0F6DB5;
	font-size: 20px;
}
.index .index-box2 .index-info .index-info-right .index-info-data{
	padding-top: 10px;
	padding-bottom: 20px;
}
.index .index-box2 .index-info .index-info-right .index-info-data .data{
	width: 100%;
}
.index .index-box2 .index-info .index-info-right .index-info-data .data img{
	float: left;
	width: 22px;
	margin-right: 10px;
}
.index .index-box2 .index-info .index-info-right .index-info-data .data p{
	font-family: "微軟正黑體";
	font-size: 14px;
	display: flex;
	line-height: 18px;
}
.index .index-box2 .index-info .index-info-right .index-info-box{
	background: #FFFFFF;
    box-shadow: 0px 0px 7px -2px rgba(20%,20%,40%,0.5);
    border-radius:10px;
    padding: 20px 30px;
}
.index .index-box2 .index-info .index-info-right .index-info-box .box-title{
	border-bottom: 1px #0F6DB5 solid;
	padding-bottom: 8px;
    
}
.index .index-box2 .index-info .index-info-right .index-info-box .box-title span{
	display: inline-block;
    color: #0F6DB5;
    font-size: 18px;
    font-weight: 600;
    font-family: "微軟正黑體";
}
.index .index-box2 .index-info .index-info-right .index-info-box .box-title .bank{
	display: inline-block;
	padding-left: 5px;
}
.index .index-box2 .index-info .index-info-right .index-info-box .box-title .bank span{
	display: block;
    text-align: center;
    border: 1px #0F6DB5 solid;
    border-radius: 50px;
    font-size: 14px;
    color: #0F6DB5;
    padding: 2px 5px;
    line-height: 15px;
}
.index .index-box2 .index-info .index-info-right .index-info-box .box-info{	
	font-size: 14px;
    line-height: 15px;
}
.index .index-box2 .index-info .index-info-right .index-info-box .box-info .box-data{

}
.index .index-box2 .index-info .index-info-left{
	width: 35%;
}
.index .index-box2 .index-info .index-info-left img
{
	width: 100%;
}



.about_mail
{
	padding-left: 87px;
}




@media screen and (max-width: 1024px) 
{
	.index .index-box2 .index-info 
	{
	    display: flex;
	    flex-wrap: wrap;
	        padding: 60px 80px;
	}

	.index .index-box2 .index-info .index-info-right 
	{
	    width: 100%;
	    margin-right: 0px;
	    padding-bottom: 40px;
	}

	.index .index-box2 .index-info .index-info-left 
	{
	    width: 60%;
	    margin: auto;
	}
}



@media screen and (max-width: 768px) 
{

	.index .index-box2 .index-info .index-info-left 
	{
	    width: 75%;
	}
}



@media screen and (max-width: 500px) 
{

	.index .index-box2 .index-info 
	{
	    padding: 60px 20px;
	}

	.index .index-box2 .index-info .index-info-left 
	{
	    width: 90%;
	}
}


@media screen and (max-width: 304px) 
{
	.about_mail 
	{
	    padding-left: 31px;
	}
}













/*news*/

.new_list
{
	padding: 40px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    border-bottom: 1px #dcdddd solid;
}

.new_list .news_day
{
	color: #3798cd;
    border: 1px #3798cd solid;
    padding: 3px 15px;
    border-radius: 50px;
    font-size: 16px;
    margin-right: 3vw;
    transition: .5s;
}


.new_list:hover .news_day
{
	background: #3798cd;
	color: #FFFFFF;
}



.new_list .data
{
	width: 83%;
}




.new_list .data .new_mark
{
	color: #ff0000;
    border: 3px #ff0000 double;
    padding: 0px 3px;
    display: inline-block;
    font-size: 14px;
    transition: .5s;
}

.new_list:hover .data .new_mark
{
	color: #3798cd;
	border: 3px #3798cd double;

}


.new_list .data .name
{
	padding: 10px 0px;
    border-bottom: 1px #0F6DB5 solid;
    color: #0F6DB5;
}

.new_list .data .text
{
	padding: 10px 0px;
    font-size: 14px;
    color: #595757;
    line-height: 25px;
    transition: .5s;
}

.new_list:hover .data .text
{
    color: #0F6DB5;
}


@media screen and (max-width: 768px) 
{

	.new_list .news_day 
	{
	    margin-right: 6vw;
	}


	.new_list .data 
	{
	    width: 75%;
	}
	
}


@media screen and (max-width: 500px) 
{

	.new_list .news_day 
	{
	    margin-right: 6vw;
	    margin: auto;
	    margin-bottom: 5px;
	}

	.new_list 
	{
	    flex-wrap: wrap;
	}

	.new_list .data 
	{
	    width: 100%;
	    text-align: center;
	}


	.new_list .data .data_top
	{
	    padding: 10px 0px;
	    border-bottom: 1px #0F6DB5 solid;
	}

	.new_list .data .name 
	{
	    padding:0px;
	    border-bottom:unset;
	}

	.new_list .data .new_mark 
	{
	    margin-bottom: 5px;
	}



/*	.new_list .data .data_top
	{
		display: flex;
	    justify-content: center;
	    align-items: center;
	    align-content: center;
	    padding: 10px 0px;
	    border-bottom: 1px #0F6DB5 solid;
	}

	.new_list .data .name 
	{
	    padding:0px;
	    border-bottom: unset;
	}

	.new_list .data .new_mark 
	{
	    margin-right: 10px;
	}
*/


}






/*news內頁*/

.news_bg .new
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.news_bg .new .new_pic
{
	width: 40%;
    margin-right: 4vw;
}

.news_bg .new .new_data
{
	width: 55%;
}

.news_bg .new .new_data .new_name
{
	padding: 10px 0px;
    border-bottom: 1px #dcdddd solid;
    color: #0F6DB5;
    font-weight: 600;
}

.news_bg .new .new_data .new_date
{
	color: #FFFFFF;
    background: #3798cd;
    width: 110px;
    padding: 3px 0px;
    text-align: center;
    margin-top: 10px;
    border-radius: 50px;
    font-size: 15px;
}

.news_bg .new_text
{
	padding-top: 20px;
    line-height: 25px;
    font-size: 14px;
}


@media screen and (max-width: 600px) 
{
	.news_bg .new 
	{
	    flex-wrap: wrap;
	}

	.news_bg .new .new_pic 
	{
	    width: 95%;
	    margin-right: 0;
	    margin: auto;
	}

	.news_bg .new .new_data 
	{
	    width: 95%;
	    margin: auto;
	}

	.news_bg .new_text 
	{
	    width: 95%;
	    margin: auto;
	}
}











/*download*/

.news_bg
{
	padding: 10px 0px;
    padding-top: 30px;
}

.news_bg>ul
{
	
}

.news_bg>ul>a
{
	display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    width: 80%;
    /*width: 830px;*/
    background: #FFFFFF;
    box-shadow: 0px 0px 7px -1px rgba(20%,20%,40%,0.5);
    border-radius: 3px;
    margin: 20px auto;
    padding: 5px 10px;
    color: #595757;
    transition: .5s;
    font-size: 14px;
}

@media screen and (max-width: 1000px) 
{
	.news_bg>ul>a
	{
	    width: 90%;
	}
}


@media screen and (max-width: 500px) 
{
	.news_bg>ul>a
	{
	    width: 100%;
	    padding: 10px;
	}
}


.news_bg>ul>a:hover
{
	color: #0f6db5;
	box-shadow: 0px 0px 10px 0px rgba(20%,20%,40%,0.5);
	

}

.news_bg>ul>a>li
{
	padding: 5px 0px;
}





.news_bg>ul>a>li:nth-child(1) /*編號*/
{
	color: #0f6db5;
    width: 45px;
    border-right: 1px #3798cd solid;
    padding-left: 5px;
}




.news_bg>ul>a>li:nth-child(3) /*按鈕*/
{
	line-height: 10px;
    border-left: 1px #3798cd solid;
    width: 50px;
    text-align: center;
}

.news_bg>ul>a>li:nth-child(3) img
{
	width: 16px;
}

.news_bg>ul>a>div
{
	display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    width: 90%;
    padding: 5px 0px;
}

.news_bg>ul>a>div>li:nth-child(1)/*名稱*/
{
	width: 85%;
	padding: 0px 15px;
}

.news_bg>ul>a>div>li:nth-child(2)/*時間*/
{
	width: 120px;
    padding-right: 30px;
    text-align: center;
    letter-spacing: 1px;
}


@media screen and (max-width: 500px) 
{
	.news_bg>ul>a>div
	{
		flex-wrap: wrap;
		border-left: 1px #3798cd solid;
    	border-right: 1px #3798cd solid;
	}

	.news_bg>ul>a>div>li:nth-child(1) /*名稱*/
	{
	    width: 100%;
	    padding-bottom: 5px;
	}

	.news_bg>ul>a>div>li:nth-child(2) /*時間*/
	{
	    text-align: left;
	    padding: 0px 15px;
	}

	.news_bg>ul>a>li 
	{
	    padding: 10px 0px;
	}

	.news_bg>ul>a>li:nth-child(1) /*編號*/
	{
	    border-right: unset;
	}


	.news_bg>ul>a>li:nth-child(3) /*按鈕*/
	{
	    border-left: unset;
	}



}









/*product*/
.product{
	margin: 5% 4%;
}
.product_title{
	margin-bottom: 20px;
}
.product_title h3{
	margin: 0;
	font-family: 'Archivo Black', sans-serif;
	font-size: 3.5em;
	color: #4B4B4B;
	font-weight: 500;
}
.product_box{
	margin: 2% 0%;
}
.product_content{
	text-align: center;
	text-decoration: none;
	list-style: none;
	text-decoration: none;
	padding: 12px 0 0 0;
    margin-bottom: 2%;
    border-bottom: solid 1px #CECECE;	
}

.product_content img{
	width: 95%;
}

.product_content:hover{
	background: #E6E6E6;
}
.pro_name{
	color: #4B4B4B;
    padding: 3% 0;
    text-align: center;
}
.pro_text {
    padding: 3% 0;
	font-size: 0.8em;
	color: #7B7B7B;
}

/*fixedbox*/
.fixedbox{
	position: fixed;
    top: 70.5%;
    right: 10px;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
	-moz-align-items: flex-start;
	-ms-align-items: flex-start;
	-o-align-items: flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-startr;
	-o-justify-content: flex-start;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	z-index: 999;
	border-radius: 50px;
	padding: 3px 0 20px;	
}
.fixedbox > a{
	color: #000;
	text-align: right;
	width: 100%;
	font-size: 15px;
}
.fixedbox a img{
	width: 55px;
}

/*top*/
#gotop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 35px;
	cursor: pointer;
	z-index: 9999;
}
#gotop img {
	width: 55px;
	height: auto;
}

/*內頁標題*/
.title{
	text-align: left;
}
.title p{
	margin: 0;
	font-family: 'Archivo Black', sans-serif;
	font-size: 3.5em;
	color: #4B4B4B;
	
}

/*水平線*/
hr{
	height: 1px;
	width: 100%;
	margin: 0;
	border: none;
	border-bottom: 2px solid #E6E6E6;
}

/*按鈕*/
a.btn{
	background: #4B4B4B;
	color: #fff;
	width: 300px;
	margin: 1em auto;
	text-decoration: none;
	font-size: 1.5em;
	font-family: '微軟正黑體';
	text-align: center;
	display: block;
	line-height: 2em;
}
a.btn:hover{
	background: #DA4E40;
}

a.btn_fb{
	background: #1D438E;
	color: #fff;
	width: 300px;
	margin: 1em auto;
	text-decoration: none;
	font-size: 1.5em;
	display: block;
	line-height: 2em;
}
a.btn_fb:hover{
	background: #13213B;
}

/*返回*/
.back{
	text-align: right;
	width: 100%;
	margin:30px 0; 
}


@media screen and (max-width: 600px) 
{
	.back
	{
		text-align: center;
		margin:40px 0;
	}
}








.back a{
	color: #0f6db5;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 2px 35px;
    border: 1px #0f6db5 solid;
    transition: .5s;

}
.back a:hover{
	color: #fff;
	background: #0f6db5;
}

/*footer*/
footer{
	background: #0F6DB5;
	padding: 40px 141px 0px;
	color: #fff;
}


footer .footer_top
{
	padding-bottom: 10px;
	border-bottom: 1px #3798CD solid;
	display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
	position: relative;
}





footer .footer_logo
{

	width: 338px;
	/*padding-bottom: 20px;
	border-bottom: 1px #3798CD solid;*/
}
footer .footer_logo img{
	/*max-width: 338px;*/
}
footer .footer_top .media{
	display: none;
}
footer .footer_top .media img
{
	width: 45px;
    margin: 0px 5px;
}
footer .footer_top .qrcode{
	position: absolute;
	right: 0;
	top: 0;
}
footer .footer_top .qrcode img{
	width: 100px;
}
@media screen and (max-width: 768px) 
{


	footer 
	{
	    padding: 40px 60px 0px;
	}
	footer .footer_top .qrcode{
		right: 5px;
	  }
	  footer .footer_top .qrcode img {
		width: 80px;
	}
	footer .footer_info {
		padding: 20px 80px 20px 0px;
	}
	/*footer .footer_top
	{
		flex-wrap: wrap;
		justify-content: center;
	}*/

	/*footer .footer_logo
	{
		width: 80%;
		padding-bottom: 10px;
	}*/

	/*footer .footer_top .media
	{
		width: 100%;
	}*/

}

@media screen and (max-width: 600px) 
{


	footer 
	{
	    padding: 40px 10px 0px;
	}
	footer .footer_top
	{
		flex-wrap: wrap;
		justify-content: center;
	}

	footer .footer_logo
	{
		width: 80%;
		padding-bottom: 10px;
	}
	footer .footer_top .qrcode {
		position: relative;
		right: auto;
		width: 100%;
		text-align: center;
	}

}



@media screen and (max-width: 400px) 
{

	footer .footer_logo
	{
		width: 100%;
	}
}


footer .footer_info{
	padding: 20px 100px 20px 0px;
}
footer .footer_info .txt span{
	font-size: 14px;
	line-height: 30px;
}
footer .footer_info .txt span:nth-child(n+2){
	padding: 0px 30px;
}
footer .footer_back span{
	display: block;
	width: 100%;
	line-height: 30px;
	font-size: 14px;
}
.footer_back a.ft_mail img{
    width: 45px;
    margin: 0px 5px;
	vertical-align: middle;
}

/*coptright*/
address{
	background: #3798CD;
	color: #fff;
	text-align: center;
	font-style: normal;
	font-size: 14px;
    padding: 3px 10px;
}
address span a{
	color: #fff;
}









	/*頁碼*/
	.page
	{
		text-align: center;
		margin: 20px 0px;
		font-size: 16px;
		font-weight: 600;
		
	}
	.page ul 
	{
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	.page ul li 
	{
		display: inline-block;
	}
	.page ul li a 
	{
		padding: 0.2em;
		display: block;
		text-decoration: none;
		color: #000000;
	}

	.page ul li .select, .pagenumber a:hover 
	{	
	    padding: 10px;
	    padding-top: 15px;
	    margin: 0px 20px;
	    background: url('../images/website_image/page_now.png')no-repeat center center;
	    background-size: 20px;
	    color: #3798cd;
	}

	.fa-angle-right::before
	{
		content: "";
	    background: url('../images/website_image/page_next.png')no-repeat center center;
	    background-size: 20px;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    margin: -20px 0px;
	    padding: 5px 40px;
	}

	.fa-angle-left::before
	{
		content: "";
	    background: url('../images/website_image/page_prev.png')no-repeat center center;
	    background-size: 20px;
	    width: 20px;
	    height: 20px;
	    /*position: absolute;*/
	    margin: -20px 0px;
	    padding: 5px 40px;
	}


















/* 影片RWD */
@media screen and (max-width: 1920px) {
	iframe{
		width: 42%;
		height: 314px
	}
}


/*contact*/
.trans_box
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    padding-bottom: 30px;
    border-bottom: 5px #3798cd solid;
    width: 95%;
    margin: auto;
}



.trans_box .trans_map
{
	width: 45%;
	margin-right: 5vw;
}

.trans_box .trans_map iframe
{
	width: 100%;
}

.trans_box .trans_text
{
	width: 50%;
}



.trans_box .trans_text .trans_logo
{
	width: 350px;
}

.trans_box .trans_text .trans_logo img
{
	
}

.trans_box .trans_text2
{
	
}




.trans_box .trans_text p
{
	font-size: 14px;
}

.trans_box .trans_text .trans_mail
{
	font-size: 14px;
    margin-top: -10px;
    padding-left: 55px;
}


@media screen and (max-width: 1000px) 
{
	.trans_box .trans_text .trans_logo 
	{
	    width: 100%;
	}
}



@media screen and (max-width: 768px) 
{
	.trans_box 
	{
	    flex-wrap: wrap;
	    width: 90%;
	}

	.trans_box .trans_map 
	{
	    width: 100%;
	    margin-right: 0;
	}

	.trans_box .trans_text 
	{
	    width: 100%;
	    padding-top: 20px;
	}

	.trans_box .trans_text .trans_logo 
	{
	    width: 350px;
	}


}






.trans
{
	width: 95%;
    margin: auto;
    padding: 20px 10px;
}


.trans .trans_box2
{
	
}

.trans .trans_box2 .transtyle
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    padding: 5px 0px;
}

.trans .trans_box2 .transtyle .word
{
	width: 90px;
    font-size: 15px;
    padding-top: 5px;
    margin-right: 1vw;
}

.trans .trans_box2 .transtyle .form_item
{
	width: 90%;
}


.trans .trans_box2 .transtyle label
{
	display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.trans .trans_box2 .transtyle label img
{
	width: 120px;
    margin-right: 10px;
}





@media screen and (max-width: 768px) 
{
	.trans 
	{
	    width: 90%;
	}

	.trans .trans_box2 .transtyle .word 
	{
	    width: 80px;
	    margin-right: 2vw;
	}

	.trans .trans_box2 .transtyle .form_item 
	{
	    width: 85%;
	}

}



@media screen and (max-width: 500px) 
{
	.trans .trans_box2 .transtyle 
	{
	    flex-wrap: wrap;
	}

	.trans .trans_box2 .transtyle .form_item 
	{
	    width: 100%;
	}

	.trans .trans_box2 .transtyle label 
	{
	    width: 100%;
	}

}




@media screen and (max-width: 320px) 
{
	.trans .trans_box2 .transtyle label 
	{
	    width: 100%;
	    flex-wrap: wrap;
	}

	.trans .trans_box2 .transtyle label img 
	{
	    margin-bottom: 5px;
	}

}










.trans_btn
{
	margin: 20px 0px;
	text-align: center;
}

.trans_btn .reset_btn
{
    text-decoration: none;
    color: #FFFFFF;
    padding: 7px 40px;
    background: #3798cd;
    border-radius: 50px;
    display: inline-block;
    margin-right: 30px;
    border: unset;
    letter-spacing: 2px;
    transition: .5s;
}



.trans_btn .reset_btn:hover
{
    background: #0F6DB5;
}

.trans_btn .submit_btn
{
    text-decoration: none;
    color: #FFFFFF;
    padding: 7px 40px;
    background: #3798cd;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    line-height: 20px;
    letter-spacing: 2px;
    transition: .5s;
}

.trans_btn .submit_btn:hover
{
    background: #0F6DB5;
}


@media screen and (max-width: 500px) 
{
	.trans_btn .reset_btn 
	{
	    padding: 7px 30px;
	    margin-right: 10px;
	}

	.trans_btn .submit_btn
	{
		padding: 7px 30px;
	    margin-right: 10px;
	}

}

@media screen and (max-width: 317px) 
{
	.trans_btn .reset_btn 
	{
	    margin-right: 0;
	    width: 80%;
	    margin-bottom: 10px;
	}

	.trans_btn .submit_btn
	{
		margin-right: 0;
	    width: 80%;
	    margin-bottom: 10px;
	}

}


















/*RWD*/
@media screen and (max-width: 1024px) {
	header .hnav .mul > li{
		margin: 0px -1em 0em;
	}
	.index .index-box .index-about .index-about-left{
		width: 100%;
	}
	.index .index-box .index-about .index-about-right{
		width: 70%;
    	margin: auto;
	}
	footer .footer_info .txt span:nth-child(3){
		display: block;
		width: 100%;
		padding: 0px 0px;
	}
	iframe{
		width: 60%;
		height: 314px
	}
}


@media screen and (max-width: 500px) 
{
	.index .index-box .index-about .index-about-right
	{
		width: 100%;
	}
}



@media screen and (max-width:768px) 
{
	header
	{
		position: absolute;
		top: 0;
		width: 100%;
		background: white;
	}
	.bannerbox
	{
		margin: 0 auto 0px;
	}

	/*language*/
	.language{
		display: none;
	}
	header .hnav .mul .mob_language{
		width: 80%;
		display: block;
		border-top: 1px #0F6DB5 solid;
		padding: 10px 0px;
	}
	.mob_language a{
		padding: 0px 15px;
	}
	.mob_language a:first-child{
		border-right: 1px #fff solid;
	}
	header .hnav .mul .mob_language a > span{
		display: inline;
		color: #fff;
	}

	/*logo*/
	.logo {
		padding: 15px 63px 6px 15px;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	.logo img{
		max-width: 220px;
	}

	.head {
		text-align: center;
		margin-bottom: 0px;
		box-shadow: 0px 1px 7px #212121;
		height: 89px;
	}

	/*hanburger icon*/
	.menu-trigger {
		display: block;
		width: 33px;
		height: 30px;
		cursor: pointer;
		position: absolute;
		top: 18px;
		right: 10px;
	}
	.bar, .bar::after, .bar::before {
		width: 33px;
		height: 4px;
	}
	.bar {
		position: relative;
		-webkit-transform: translateY(25px);
		-moz-transform: translateY(25px);
		     transform: translateY(25px);
		background: #000;
		-webkit-transition: all 0ms 300ms;
		-moz-transition: all 0ms 300ms;
		transition: all 0ms 300ms;
		top: -9px;
		left: 0px;
	}
	.bar.animate {
		background: rgba(255, 255, 255,0);
	}
	.bar:before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 9px;
		background: #000;
		-webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		-moz-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -moz-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.bar:after {
		content: "";
		position: absolute;
		left: 0;
		top: 9px;
		background: #000;
		-webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		-moz-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -moz-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.bar.animate:after {
		top: 0;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		     transform: rotate(45deg);
		-webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.bar.animate:before {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		     transform: rotate(-45deg);
		-webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	/*產品手機板樣式*/
	.hamburger-promenu {
		width: 35px;
		height: 40px;
		cursor: pointer;
		display:inline-block;
	}
	.pro_bar {
		width: 35px;
		height: 4px;
	}
	.pro_bar {
		transition: all 0ms 300ms;
	}
	.pro_bar.animate {
		background: rgba(255, 255, 255, 0);
	}

	/*menu*/
	nav {
		display: none;
		background: #3798CD;
	}
	ul.menu {
		margin: 0;
		width:100%;
		min-width: 100%;
		text-align:center;
		float: inherit;
		background-color: #eff9eb;
		padding: 0;
	}
	.subBtn {
		position: relative;
	}
	.subBtn a {
		display: block;
		width: 100%;
	}
	.menu_btn {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding:0; 
	}
	.menu_btn:hover .subBtn {
		display: none;
	}
	.menu a {
		padding: 0.8em 0;
		border-bottom: #9FA0A0 1px solid;
	}
	.menu{
		margin-bottom: 0px;
	}
	header .hnav .mul > li{
		width: 100%;
		max-width: none;
		margin: 0;
		position: relative;
	}
	header .hnav .mul > li:hover::after{
		all: unset;
	}
	.hnav .mli > a {
		color: #fff;
		border: 0;
		padding: 10px 0em;
		display: inline-block;
	}
	.hnav .mli .sul {
		position: relative;
		margin-top: 0px;
		background-color: #858585;
		width: 100%;
		left: 0;
		padding: 0px;
	}
	.hnav .mli:hover .sul {
		display: none; 
	}
	.hnav .sli{
		border: none;
	}
	.hnav .sli:first-child{
		border: none;
	}
	.hnav .sli:last-child{
		border: none;
	}
	.hnav .sli a {
		background: #0F6DB5;
		padding: 10px 0px;
	}
	.hnav .sli a:hover{
		color: #fff;
	}
	.hnav .mli > a:hover, .hnav .mli.has_sub_btn:hover > a{
		color: #fff;
	}
	.hnav .mli span.sul_icon{
		content: "";
		width: 26px;
		height: 32px;
		top: 7px;
		right: 10px;
		position: absolute;;
		display: inline-block;
		-webkit-transition: all 0.3s;
		 -moz-transition: all 0.3s;
		  -ms-transition: all 0.3s;
		   -o-transition: all 0.3s;
		      transition: all 0.3s;
	}
	.hnav .mli.has_sub_btn span.sul_icon{
		background-image: url('../images/website_image/sul_icon.png');
		background-position: center center;
		background-repeat: no-repeat;
	}
	.hnav .mli.has_sub_btn.t span.sul_icon{
		-webkit-transform: rotate(180deg);
		 -moz-transform: rotate(180deg);
		  -ms-transform: rotate(180deg);
		   -o-transform: rotate(180deg);
		      transform: rotate(180deg);
	}

	/*banner*/
	.banner {
		margin-top: 59px;
	}

	/*index*/
	/*about*/
	.about_title p {
		font-size: 2em;
	}
	.about_content{
		color: #9C9C9C;
		margin: 30px 0;
	}

	/*news*/
	.news_maintitle p{
		font-size: 2em;
	}
	.news_title{
		margin-top: 0.5em;
	}

	.news_title, .news_right{
		color: #878787;
		font-size: 1.2em;
		line-height: 1.5em;
	}
	.news_right p{
		font-size: 0.8em;
		line-height: 1.5em;
	}

	/*product*/
	.iproduct_box .iproduct_title .iproduct_title_tw span::before{
		right: 70%;
	}
	.iproduct_box .iproduct_title .iproduct_title_tw span::after{
		left: 70%;
	}
	.iproduct_box {
		padding: 0 15px;
		width: 100%;
	}
	.iproduct .ipbox .listbox{
		padding-top: 0px;
	}
	.iproduct .ipbox .listbox .list {
		width: 45%;
		margin-bottom: 30px;
		margin: 20px 2%;
	}
	.iproduct .ipbox .listbox .list:not(:nth-child(3n)){
		margin: 20px 2%;
	}

	.showbox 
	{
    	height: 30vw;
	}

	/*more*/
	.more a{
		font-size: 1em;
	}

	

	/*fixedbox*/
	.fixedbox a img{
		width: 50px;
	}

	/*gotop*/
	#gotop img{
		width: 50px;
	}
}

@media screen and (max-width:500px)
{
	/*header*/
	.headerbox{
		padding: 15px 10px 0px;
	}
	/*index-product*/
	.iproduct .ipbox .listbox .list{
		width: 100%;
	}
	/*footer*/


	footer .footer_info{
		padding: 20px 21px;
	}
	footer .footer_info .txt span{
		display: block;
	}
	footer .footer_info .txt span:nth-child(n+2){
		padding: 0px 0px;
	}

	.showbox 
	{
	    height: 62vw;
	}


}

/*卷軸*/
/*::-webkit-scrollbar {
	width: 17px;
	background: #fff;
}
::-webkit-scrollbar-thumb {
	width: 13px;
	background-color: #454545;
	border-radius: 6px;
}*/
/**/
@-webkit-keyframes tada {
   0% {-webkit-transform: scale(1);transform: scale(1);} 
   10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg);} 
   30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);transform: scale(1.1) rotate(3deg);} 
   40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);transform: scale(1.1) rotate(-3deg);} 
   100% {-webkit-transform: scale(1) rotate(0);transform: scale(1) rotate(0);} 
}
@keyframes tada {
   0% {-webkit-transform: scale(1);transform: scale(1);} 
   10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg);} 
   30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);transform: scale(1.1) rotate(3deg);} 
   40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);transform: scale(1.1) rotate(-3deg);} 
   100% {-webkit-transform: scale(1) rotate(0);transform: scale(1) rotate(0);} 
}
@-webkit-keyframes eimg {
	from { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; }
	to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes eimg {
	from { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; }
	to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes slowtop{
from {
-webkit-transform:translateY(50%);transform:translateY(50%);
opacity: 0; }
to{
-webkit-transform:translateY(0px);transform:translateY(0px);
opacity: 1;}
}
@keyframes slowtop{
from {
-webkit-transform:translateY(100px);transform:translateY(100px);
opacity: 0; }
to{
-webkit-transform:translateY(0px);transform:translateY(0px);
opacity: 1;}
}
@-webkit-keyframes breath {
50% {
    transform: scale(1.05);-webkit-transform: scale(1.05);}
}
@keyframes breath{
50% {
    transform: scale(1.05);-webkit-transform: scale(1.05);}
}