@charset "utf-8";
/* CSS Document */




/****首頁****/
.page_mobilehome .owl-prev {position: absolute; top: 35%; left: 24%; transform: translate(0, -50%);}
.page_mobilehome .owl-next {position: absolute; top: 35%; right: 24%; transform: translate(0, -50%);}
.page_mobilehome .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom:32vh;}
.page_mobilehome .swiper-pagination-bullet {width: 12px; height: 12px; border-radius: 12px; background: #fff; opacity: 0.7;transition: .2s linear;}
.page_mobilehome .swiper-pagination-bullet-active {opacity: 1; background: #fff; width: 26px;}
.page_mobilehome .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0px 8px;}
/****首頁****/


h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 0px;
}
#header div.util>ul>li.language{
	-webkit-box-sizing: initial;
    -moz-box-sizing: initial;
     box-sizing: initial;
	 display:none;
}
#container .wrap{ overflow:visible;}
#Dyn_head .minner{ max-width:100% !important;}



.page_mobilehome #Dyn_2_1 .module.module-um{ max-width:100% !important;}
.page_mobilehome .btn,.page_mobilehome .btn .mbtn {    
    padding: 0;   
    border: none;
    border-radius: 0;    
}
.page_mobilehome .btn:hover,.page_mobilehome .btn .mbtn:hover{ background:none;border: none;  border-radius: 0; }
.page_mobilehome #video-popup .close{ width:22px; height:22px;}

/****購物車****/
.module.module-minicart{ display:none;}

/****footer****/
.footer{ padding:0; background:none;}
.footer .minner{ max-width:100% !important;}


.toggle_btn{ display:none; border:none; background:none;position: fixed; right: 3%;  top: 30px;   z-index: 2003;  width: 24px; height: 20px;padding: 0;}
.toggle_btn span{ display:block; width:100%; height:2px; background:#333; margin:5px 0;transition: 0.5s ease;}

.toggle_btn:hover span{ background:#f15a24;}
.mobile_nav_active .toggle_btn span{ background: #f15a24;}
.mobile_nav_active .toggle_btn span:nth-child(1){ transform: rotate(-45deg); position: absolute; top: 5px;}
.mobile_nav_active .toggle_btn span:nth-child(2){ transform: rotate(-135deg); position: absolute; top: 5px;}
.mobile_nav_active .toggle_btn span:nth-child(3){ display:none;}

#mobile-body-overly{ display:none;z-index:2001; position:fixed; top:0; top:0; width:100%; background:rgba(0,0,0,0.5);  bottom:0;}
.mobile_nav_active #mobile-body-overly{ display:block; }
.mobile_nav_active .mobile_navi{ display:block; /*background:rgba(34,35,34,1);*/}

#mobile-nav{ display:none; z-index:2002;position:fixed; top:0; top:0; width:100%; height:100vh;}
.mobile_nav_active #mobile-nav{  display:block; }
#mobile-nav .brand{ background:#fff;}
#mobile-nav ul{ padding:20px;}
#mobile-nav ul li a{ font-size:16px; padding:10px 0; font-family: 'Microsoft Yahei',sans-serif;  font-weight: bold; display:block;}
#mobile-nav ul li a:hover{ color:#f15a24;}
#mobile-nav ul li ul{ padding:0 !important; height:auto !important;border-top: 1px solid rgba(255,255,255,0.5);border-bottom: 1px solid rgba(255,255,255,0.5);}
#mobile-nav ul li:hover ul{ display:block !important;}

.page_mobileptdetail .module.module-detail.md_style1{ max-width:100% !important;margin-bottom:0px;}
.page_mobileptdetail .module.module-detail.md_style1 .mpgdetail{ padding:0;}
.page_mobileptdetail .module.module-detail.md_style1 .mpgtitle{ display:none;}
.page_mobileptdetail .module.module-detail.md_style1 .mb{ padding-top:0;}
.page_mobileptdetail .module.module-misc{ display:none;}

.main_visual .owl-dots{ display:none;}
.m13 div.con01 div.btn {
    position: absolute;
    top: -60px;
    right: 0;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #d7d7d7;
	padding:0;
}
.m13 div.con01 div.btn:hover{ background-color:transparent;}
.m21 div.con03 div.inner div.btn {
    position: absolute;
    z-index: 2;
    bottom: 110px;
    left: 60px;
    border: 1px solid #d7d7d7;
	padding:0;
}
.m21 div.con03 div.inner div.btn:hover{ background-color:transparent;}

.mobile_ceo_img{ display:none; text-align:right;}
.m15 div.con02 ul.text-bottom dl.info{ width:auto;}
.m15 div.con02 div.inner>div.text{ padding-left:50px;}
.m33 .con02 table.table-style4 th.title{ text-align:center;}
#video-popup .popup-close img{ width:22px; height:auto;}
.m00.m70.m71 .con-1080.con01{ margin-bottom:50px;border-bottom: 2px solid #f15a24;}
.m00 table.table-style8{ border-top:none;}
ul.sub_tab ul{width: calc(100% + 2px);}
.go-pcurl{ display:none;}

.module_contact .module-form .formBS{ border:none;}
.module_contact .module-form .formBS .form-group{ border:none; margin:15px 0; font-size:17px;}
.module_contact .module-form .formBS .form-group [class*="col-"]:first-child{ border:none; font-family: 'Microsoft Yahei',sans-serif;}
.module_contact .module-form .formBS .form-group [class*="col-"]{ border:none;}
.module_contact .module-form .formBS .form-control{
	border-radius:0;
	height: 40px;
    margin-top: 2px;
    border: 1px solid #d7d7d7;
    background: #f6f6f6;
    padding: 0 10px;
}

.module_contact .form-btn .btn.btn-s{
	font-size: 17px;
    font-weight: 300;
    line-height: 60px;   
    width: 200px;
    height: 60px;
    color: #fff;
    background: #f15a24;
	border:none;
	border-radius:0;
	font-family: 'Microsoft Yahei',sans-serif;
	display: inline-flex;
    align-items: center;
    justify-content: center;
}
.module_contact .form-btn .btn.btn-s:hover{background: #f15a24;}
.module_contact .formBS .col-sm-9{width: calc(100% - 200px);}
.module_contact pre {
    border: 1px solid #bcbcbc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 120px;
    padding: 20px;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    color: #4f4f4f;
    line-height: 1.8;
    overflow-y: scroll;
    margin-bottom: 10px;
	background:#fff;
	border-radius:0;
}
.module_contact .m00.contact{ padding:0 15px;}
@media screen and (max-width: 1420px){	
	#header .header-wrap{  min-width: 85%;}
	#wrap, #container{ min-width:100%;}
	ul.sub_tab{ width:100%;}
}
@media screen and (max-width: 1300px){	
	#show-wrap{ width:100%;}
}
@media screen and (max-width: 1280px){	
	#header .header-wrap{  min-width: 95%; width:95%;}
	#header nav>ul>li{ padding:0 20px;}
	.con03 ul.list{ width:100%;}
}
@media screen and (max-width: 1080px){	
	#footer .wrap{ width:calc(100% - 30px); padding:0 15px;}
	[class*="con-"][class*="-1080"] {    width: 100%;}
	.con02{ padding: 20px; height: auto;}
	.con05{ position:relative;height:auto;}
	
	.con05 div[class*=box] div.text{ position:relative; width:100%; top:auto;min-height:inherit;    max-height:inherit;}
	.con05 div[class*=box] div.img{ position:relative; width:100%;top:auto; height:auto;}
	.con05 div[class*=box] div.img img{ width:100%;}
	.con05 div.box1, .con05 div.box5{ position:relative; top:auto; }
	.con05 div.box2, .con05 div.box6{ position:relative; width:100%;top: auto;}
	.con05 div.box3, .con05 div.box7 {position:relative; width:100%; top:auto; right:auto;}
	.con05 div.box4, .con05 div.box8 {
		top: auto;
		left: 0;
		width: 100%;
		height:auto ;
	}
	
	[class*=con0] div.title h5.tit1{ padding-top:50px;}
	.con03{ padding: 20px; height: auto;}
	.con03 ul.list li{ width:50%;}
	.con03{ padding: 20px; height: auto;}
	.m11 div.con02 ul.list li{ width: calc(100% / 3 - 12px);}
	.m11 div.con02{ height:auto;}
	.m11 div.con03{ height:auto;}
	.m11 div.con03 h4.slg{ padding-top:0;}
	.m11 div.con04 div.title h3.tit1 {  padding: 50px 0 50px;}
	.m11 div.con01 div[class*=box3]{ padding-bottom:0;}
	.m11 div.con03{ background-size: cover}
	
	.m11 div.con04 div.line{ display:none;}
	.m11 div.con04 div.line1{ display:none;}
	[class*="con-"][class*="-1080"]{ width:100%;}
	
	.m11 div.con05 div[class*=group]{ width:100%;}
	.con-1080.group{ overflow-x:auto; padding:0 15px;}
	.ani.in-view .con-1080.group .group1{ width:1080px;}
	.ani.in-view .con-1080.group .group2{ width:1080px;}
	.ani.in-view .con-1080.group .group3{ width:1080px;}
	.ani.in-view .con-1080.group .group4{ width:1080px;}
	.ani.in-view .con-1080.group .group5{ width:1080px;}
	.ani.in-view .con-1080.group .group6{ width:1080px;}
	.ani.in-view .con-1080.group .group7{ width:1080px;}
	.pb180{ padding-bottom:30px !important;}
	.m11 div.con01{ margin-top:0;}
	.m13 div.con01 div.btn{ right:15px;}
	.m15 div.con02{ padding:0;}
	
	.m21 div.con01 div.inner div.img{ width:100%; height:auto;}
	.m21 div.con01 div.inner div.img img{ width:100%;}
	.m21 div.con01.in-view div.inner div.text {width:100%; height:auto; position:relative; bottom:0;}
	.m21 div.con01 div.bgimg{ width:70%; bottom:0;}
	
	.m20 div.product div.inner {padding: 40px 0 40px;}	
	.m20 div.product div.inner div.item{ width:100%;text-align: center;}
	.m20 div.product div.inner div.text{ width:100%;padding: 20px;}
	.m20 div.product div.info div.list div.more_view{ width:100%;}
	.m20 div.product:nth-child(even) div.inner div.item {
		float: none;
		text-align: center;
	}
	.m20 div.product div.inner div.item div[class*=swiper-pagination]{ width:100%;}
	.m00 h5.tit1 {  width: calc(100% - 40px); margin-left:20px; margin-right:20px;  }
	.con-1080.slider #carousel {  width: 100%;  height: auto;}
	#tcertification{ padding: 0 20px;}
	#tcertification .bx-wrapper{ max-width:100% !important;}
	.m33 .con01 a[id*=m33_lt] {  left: 0;}
	.m33 .con01 a[id*=m33_gt] {   right: 0;}
	
	.m52 ul.table-style7{ display:flex;flex-wrap: wrap;}
	.m52 ul.table-style7 li{ width:50%; padding:15px;}
	.m52 ul.table-style7 li:nth-child(odd){ margin-right:0;}
	.m52 ul.table-style7 div.img {
		overflow: hidden;
		width: 100%;
		height: auto;
	}
	.m52 ul.table-style7 div.text{ height:auto;padding: 10px 0;}
	#video-popup iframe {
		width: 90vw !important;
    	height: 45vw !important;
	}
	.m52 .notice_video{ height:auto;}
	.bbs_view .con01 {
		position: relative;
		margin: 50px auto 50px;
		padding:0 20px;
	}
	.bbs_view_pager{ display:none;}
	.bbs_view{ width:100%;}
}
	
@media screen and (max-width: 992px){	
	.toggle_btn{ display:block;}
	#header{ background:#fff;}
	#header .header-wrap{  min-width: 100%; width:100%;margin: 0 auto; }	
	#header nav ul{ display:none;}
	#header div.util{ display:none; right:8%  !important;}
	.m11 div.title div.top_title{ background:none; padding: 20px;}
	.m11 div.con01 div[class*=box] div.text {		
		bottom:0;		
		left: 0;
		padding-left:30px;
		padding-top:30px;
		padding-right: 30px;
		width:100%;
		background: rgba(255,255,255,0.8);
	}
	.m11 div.con01 div[class*=box].right div.text{ right:auto;width:100%;}
	.m11 div.con01 div[class*=box3] div.text{ padding-bottom:0;}
	.m11 div.con01 div[class*=box]{ padding-top:0;}
	.m11 div.con01 div[class*=box].in-view div.img{ width:100%; float:none; height:auto;}
	.m11 div.con01 div[class*=box].in-view div.img img{ width:100%;}
	.mobile_ceo_img{ display:block;}
	.m11 div.con04 ul.list li{ width:50%; border-bottom:1px solid #e6e6e6;border-right:1px solid #e6e6e6; padding-top:30px; padding-bottom:30px;}
	.m11 div.con04 ul.list li:nth-child(2n+2){ border-right:none;}
	.m11 div.con04 ul.list li.first { margin-bottom:0; padding-top:30px; padding-bottom:30px;}
}
@media screen and (max-width: 920px){		
	.m12 div.history div.img-box {
		position:relative;		
		top: 0;
		right: 0;
		width: 100%;
		height: auto;
	}
	.m12 div.history div.text-box {
		position: relative;
		top: 0;
		left: 0%;		
		width: 100%;
	}
	.m12 div.history [class*=box]{ min-height:inherit;margin-bottom: 50px;}
	.m12 div.history div[class*="box1"].in-view div.tit1{ padding-left:20px;margin-bottom: 20px;}
	.m12 div.history div[class*='box1'].in-view p.txt1{ padding-left:20px;}
	.m12 div.history div.img-box.left {
		right: auto;
		left: 0;
		text-align: right;
	}
	.m12 div.history div[class*='box2'].in-view div.text-box.left div.tit1{ padding-right:20px;}
	.m12 div.history div[class*='box2'].in-view div.text-box.left p.txt1{ padding-right:20px;}
	.m12 div.history div.box1.in-view div.img-box div.img01{float: none; position:relative;width:100%; height:auto}
	.m12 div.history div.box1.in-view div.img-box div.img02{float: none; position:relative;width:100%; height:auto}
	.m12 div.history div.box2.in-view div.img-box div.img03{float: none; position:relative;width:100%; height:auto}
	.m12 div.history div.box2.in-view div.img-box div.img04{float: none; position:relative;width:100%; height:auto}
	
	.m12 div.history div.img-box div.img03 {
		float: none;
		width: 100%;
		height: auto;
	}
	.m15 div[class*=con0]>div.inner div.img {
		display: block;		
		width: 100%;
		height: auto;
		margin-left:0;
	}
	.m15 div.inner>div.text {
		position: relative;		
		display: block;
		width: 100%;
		padding: 20px;
		
	}
	.m15 div.con02 div.inner>div.text{ padding-left:20px;}
	.m15 div.inner>div.img img{ width:100%;}
	.m15 ul.text-bottom li{ width:100%;}
	.m15 ul.text-bottom { margin-top:0;}
	.m15 div.inner>div.text p.tit1 { margin-bottom:30px;}
	.m15 div[class*=con0] div.bg{ display:none;}
	.m15 div[class*=con0] div.bg1{ display:none;}
	.m15 ul.text-bottom li{ padding:20px;}
	
	.m21 div.con02 ul.list li{ width:100%;}
	.m21 div.con02 ul.list li+li{ margin-left:0;}
	.m21 div.con03 div.inner div.slider {
		float: none;
		width: 100%;
		height: auto;
	}
	.m21 div.con03 div.inner ul.text {
		position: relative;
		z-index: 1;
		top: 0;
		left: 0;		
		width: 100%;
		height: auto;
		padding: 60px;	
		
	}
	.m21 div.con03 div.inner div.btn {
		position: relative;
		z-index: 2;
		bottom: 50px;
		left: 0;
		width: 100%;		
	}
	.mb150{ margin-bottom:0 !important;}
	
	.m32 div.item.in-view div.img{ width:100%;}
	.m32 div.item.in-view div.img img{ width:100%;}
	.m32 div.item div.text {
		display: block;
		margin: 0 0;
		margin-top: 20px;	
		padding: 0 20px;	
	}
	.m32 div.item:nth-child(2) div.text{margin-top: 80px;}
	.m32 div.item:nth-child(3) div.text{margin-top: 80px;}
	.m32 div.item:before{ border:none; }
	.m32 div.item{ padding-bottom:0;}
	#tpatent{ overflow-x:auto;}
	#tpatent .con-1080{  width:920px !important;}
}
@media screen and (max-width: 810px){	
	.m11 div.con02 ul.list li{ width:100%;margin-bottom: 20px;}
	.m11 div.con02 ul.list li+li { margin-left: 0px;}
	.m31 ul.list{ width:100%;}
	.m31 ul.list li{ width:calc(100% / 3);}
}
@media screen and (max-width: 768px){	
	.wrap > .minner{ padding:0;}
	#footer ul.sns{ position:relative; margin-top:15px;}
	.module_contact .formBS .col-sm-9{ width:100%;}
	.module_contact .module-form .formBS .form-group [class*="col-"]:first-child{ width:100% !important;}
}
@media screen and (max-width: 760px){
	.con01 {
		height: auto;
		top: 0;
		left: 0;
		position: relative;
		z-index: 50;
	}
	.con01 div.bg{ display:none; }
	.con01 ul.list li{ width:100%;}
	.con01 ul.list li div.img{ height:auto;}
	.con01 ul.list li div.img img{ width:100%;}
	.con01 ul.list li:nth-child(1) a{ margin-top:0;}
	.con01 ul.list li:nth-child(2) a{ margin-top:0;}
	
	.page_mobilehome .owl-prev{ left:3%;}
	.page_mobilehome .owl-next{ right:3%;}
	
	.sub_tab_box.moveani ul.sub_tab > li{ width:calc(100% / 3);}
	.sub_tab_box.moveani ul.sub_tab > li ul{ width:calc(100% + 2px);}
	
	.m13 div.con01 ul.text {		
		top: 100px;
		left: 40%;
	}
	.m20 div.product div.inner p.tit2{ word-break:break-all;}
}
@media screen and (max-width: 640px){
	.main_visual .text .title1{ font-size:48px;}
	.main_visual .text .title2{ font-size:16px}
	.con03.in-view div.title h4.tit1{ font-size:28px; line-height: 1.4;}
	.m11 div.con01 div[class*=box] div.text {
		padding-left:15px;
		padding-top:15px;
		padding-right: 15px;
	}
	.m11 div.con01 div.box2.in-view div.text p.tit1{ font-size:30px;}
	.m11 div.con01 div[class*=box] div.text p.tit1{ font-size:30px;}
	.m11 div.title div.top_title.in-view p.slg_tit1{ font-size:30px;}
	.m00 div.title p.txt1{ font-size:20px;}
	div.sub_top{ height:500px;}
	div.sub_top h2.s_title2{ font-size:50px;}
	div.sub_top div.inner{ top:200px;}
	.m00 div.title{ padding:0 20px;}
	.sub_tab_box.moveani ul.sub_tab li a{    padding: 20px 10px;}
	.m00 div.title h3.tit1 {
		font-size: 36px;		
		position: relative;
		padding: 60px 0 60px;		
	}
	.m12 div.history {margin: 50px auto 50px;}
	.m12 div.history div.tit1 {    font-size: 30px;    margin-bottom: 20px;}
	.m12 div.history p.txt1{ font-size:14px;}
	.m13 div.con01 ul.text{ top:0; left:0;}
	
	.m13 div.con01 div.left {
		display: block;
		width: 100%;
		vertical-align: top;
		padding:0 20px;
	}
	.m13 div.left div.slider{ width:100%; border:none;}
	.m13 div.left div.slider img{border: 1px solid #d7d7d7;}
	.m13 div.con01 div.right {
		position: relative;
		display: block;
		width: 100%;
		vertical-align: bottom;
	}
	.m13 div.right div.slider{ display:none;}
	.m13 div.con01 div.btn {		
		margin: 20px;
		width:calc(100% - 40px);
		position: relative;
		top: 0;
		right: 0;		
	}
	.m13 div.con01 ul.text div.date{ width:100%; text-align:center;}
	.m15 div[class*=con0]{ margin-bottom:0;}
	.m21 div.con01.in-view div.inner div.text{ padding:20px;}
	.m21 div.con01 div.bgimg{ width:100%; bottom:0;}
	
	.m20 div.product div.inner div.slide{ width:90%; height:auto;}
	.swiper-container-fade .swiper-slide .img{}
	.swiper-container-fade .swiper-slide .img img{ width:100%;}
	.m20 div.product div.info div.list div.more_view a:before{ right:35px;}
	.m20 div.product div.info div.list div.more_view a:before {right: 35%;}
	.product .bx-wrapper{ /*width:100% !important; max-width:100% !important;*/position: relative;}
	.m20 div.product div.info div.list div.page div.bx-wrapper{ border:none;}
	.m20 div[class*=product] div.page a.aprev{ z-index:99; width:30px; height:100%; display:flex; background:rgba(255,255,255,0.6); ;align-items: center;  justify-content: center; left:0;}
	.m20 div[class*=product] div.page a.anext{ z-index:99;width:30px; height:100%; display:flex; background:rgba(255,255,255,0.6); align-items: center;  justify-content: center; right:0;}
	
	.m31 ul.list li{ width:100%;border-left: none; border-top: 1px solid #e6e6e6;padding-top: 30px;}
	.m31 ul.list li:first-child{ boder-top:none;}
	div.con01 div.slider{ height:50vw;}
	
	.mb200 {margin-bottom: 50px !important;}
	.mt150 {  margin-top: 50px !important;}
	
	.m52 ul.table-style7 li{ width:100%; }
}
