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

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tfoot, thead, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;

border: 0;
font-size: 100%;
font-family: Arial,微軟正黑體,Microsoft JhengHei,新細明體,sans-serif;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html{height:100%;}
body{line-height:1; height:100%;}
ol, ul{list-style:inherit;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none;}
table{border-collapse:collapse; border-spacing:0;}
sup{vertical-align:super;}
p{font-size:17px; color:#000000; line-height:1.7em;}
a{text-decoration:none; transition:all 0.5s ease 0s;}

img{max-width:100%; max-height:100%;}

.img-cover{
    display:block;
    height:0;
    text-align:center;
    padding-bottom:75%;
    overflow:hidden;
    position:relative;
	}

.img-cover>img{
    max-width:100%;
    min-width:100%;
    height:100%!important;
    object-fit:cover;
    -moz-object-fit:cover;
    -ms-object-fit:cover;
    -o-object-fit:cover;
    -webkit-object-fit:cover;
    position:absolute;
    transform:translate(-50% , 0) scale(1);
    transition:all 0.3s;
	}

.item-link{
    width:100%;
    height:100%;
    font-size:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:30;
	}

.list-setting{padding-left:0; list-style:none;}

input{outline:none!important;}
button:focus{outline:none!important;}

.formBox{margin-bottom:15px;}

.formBox>label{
	font-size:18px;
	font-weight:bold;
	color:#333;
	padding:0 10px;
	}

.formBox>label.required{padding:0 10px 0 30px; position:relative;}

label.required::before{
	content:"※";
	font-size:18px;
	color:#ea0000;
	position:absolute;
	top:0;
	left:10px;
	}

.formBox .formBoxContent{margin-top:10px; border:1px solid #d7d7d7;}

.formBoxContent input,
.formBoxContent textarea{
	padding:10px 15px;
	border:none;
	}

.formBoxContent textarea{min-height:180px;}

.formBox .verifyBoxContent{border:0; display:flex;}

.verifyBoxContent input{
	width:150px;
    height:40px;
    margin-left:10px;
    border:1px solid #d7d7d7;
	}

.ruleCheckblock{padding:10px 10px 0; display:flex; flex-wrap:wrap;}

.ruleCheckbox{margin-right:15px; margin-bottom:10px; display:flex; align-items:center;}

.ruleCheckbox input[type=checkbox]{
    width:30px;
    height:30px;
    border:0;
    float:none;
    padding:0;
    margin:0;
    border-radius:0;
    background-color:#ddd;
    background-repeat:no-repeat;
    background-position:center;
    background-size:17px 13px;
    margin-right:10px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline:0;
    cursor:pointer;
    -webkit-transition:0.2s ease all;
    transition:0.2s ease all;
    position:relative;
	}

.ruleCheckbox input[type="checkbox"]:checked{
	background-color:#27445d;
    background-image:url(../images/icon_check.svg);
	}

.ruleCheckbox label{font-size:18px; font-weight:bold;}

.ruleCheckbox label a{color:#468cc8;}

.checkBtn{
	width:100%;
	color:#468cc8;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	padding:15px 15px;
	margin-top:20px;
	border:3px solid rgba(126,206,244,0.75);
	cursor:pointer;
	}

.checkBtn i{color:#18306a; margin-right:10px;}

.checkBtn:hover{color:#fff; background-color:#18306a; border:3px solid #18306a;}

.checkBtn:hover i{color:#fff;}

table{width:100%; text-align:center; background-color:#fff;}

table tr:nth-child(odd){background-color:#eee;}

table th, table td{
	font-size:18px;
	font-family:Arial, 微軟正黑體, "Microsoft JhengHei", 新細明體, sans-serif;
	color:#000000;
	line-height:1.5em;
	padding:10px;
	border:1px solid #aeaeae;
	vertical-align:middle;
	}

table ul{text-align:left;}

/* 圖片讀入效果_start */
.motion-txt{
	display:inline-block;
	width:100%;
	position:relative;
	overflow:hidden;
	}

.motion-txt:after{
	content:'';
	position:absolute;
	opacity:1;
	left:0;
	top:0;
	bottom:0;
	width:100%;
	background-color:#27548a;
	transform:translate3d(-101%, 0, 0);
	}

.js-scroll.show .motion-txt:after{
	transition-property:transform, opacity;
	transition-duration:0.5s;
	transition-delay:0s;
	transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
	transform:translate3d(0, 0, 0);
	}

.js-scroll.done .motion-txt:after{
	transition-property:transform;
	transition-duration:0.5s;
	transition-delay:0s;
	transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
	transform:translate3d(103%, 0, 0);
	}

.motion-txt .motion-inner{
	display:inline-block;
	width:100%;
	opacity:0;
	}

.js-scroll.done .motion-txt .motion-inner{
	opacity:1;
	}
/* 圖片讀入效果_end */

/* 側邊快捷按鈕 setting */
.sub-side-nav{
	position:fixed;
	top:70%;
	right:0;
	margin-top:-213px;
	z-index:100;
	}

.sideNavList{padding-left:0; list-style:none;}

.sideNavList li{margin-bottom:1px;}
.sideNavList li:last-child{margin-bottom:0;}

.sideNavList li a{
	padding:15px 15px;
	background-color:#008cd6;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
	}

.sideNavList li:nth-child(even) a{background-color:#3a59d1;}

.sideNavList li i, .sideNavList li span{color:#fff;}

.sideNavList li i{margin-bottom:7px;}

.sideNavList li span{
	font-size:14px;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	}

.sideNavList li.side-tel a:hover{background-color:#27548a;}

/*start*/
#wrapper{
	min-height:100%;
	overflow:hidden;
	position:relative;
	}

header{
	width:100%;
	box-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);
	position:fixed;
	z-index:990;
	top:-1px;
	}

.topMenuBlock-top{
	background-color:rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter:blur(3.5px);
    backdrop-filter:blur(3.5px);
	}

.topMenuBlock-inner{
	width:100%;
	max-width:1480px;
	margin:0 auto;
	position:relative;
	display:flex;
	justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    }

.mainLogoBox{
	width:250px;
	margin:10px 0;
	transition:all 0.3s ease-in-out;
	}

.mainLogoBox a{display:block;}

.mainLogoBox>a>img{width:100%;}

.topLinkBlock{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	}

.topLinkBox{margin-right:10px; display:none;}

.topLinkBox ul{padding-left:0; display:flex;}

.topLinkBox ul li a{
	width:35px;
    height:35px;
    font-size:18px;
    margin:0 5px;
    border-radius:50%;
    background-color:#fff;
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-align-items:center;
    align-items:center;
    transition:all 0.15s ease-in-out;
	}

.topLinkBox ul li a i{color:#000;}

.topLinkBox ul li:hover a i{color:#468da3;}

.topSearchBox{position:relative; display:none;}

.topSearchBox input{
	width:160px;
	padding:6px 10px;
	border:1px solid #ccc;
	border-radius:5px;
	outline:0;
	}

.topSearchBox button{
    background:none;
    border:none;
    padding:0;
    outline:0;
    color:#bcbcbc;
	position:absolute;
    top:7px;
    right:8px;
	}

.topInquiryBtn{margin:0 0 0 20px; display:none;}

.topInquiryBtn a{
	color:#686868;
	padding:6px 10px;
	border:1px solid #ccc;
	border-radius:5px;
	}

.topInquiryBtn a:hover{
	color:#fff;
	background-color:#468da3;
	border:1px solid #468da3;
	}

.loginBtn{margin:0 5px 0 20px; display:none;}

.loginBtn a{
	color:#000;
	display:-webkit-flex;
    display:flex;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-align-items:center;
    align-items:center;
	}

.loginBtn a i{margin-right:5px;}

.loginBtn a:hover{color:#468da3;}

.topLanBox{margin:0 15px; position:relative;}

.topLanBtn{
	color:#000;
	position:relative;
	padding:8px 20px 8px 0;
	cursor:pointer;
	}

.topLanBtn::after{
	content:"\f107";
	font-family:'Font Awesome 6 Free';
	font-weight:900;
	position:absolute;
	top:10px;
	right:0;
	transition:all 0.5s ease;
	}

.topLanBtn>i{margin-right:7px;}

.topLanBtn:hover{color:#27548a;}

.topLanBox .topLanList{
	list-style:none;
    padding-left:0;
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-35px;
    -webkit-transform-origin:top;
    -ms-transform-origin:top;
    transform-origin:top;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition:all 0.4s ease;
    pointer-events:none;
    -webkit-transform:rotateX(90deg);
    transform:rotateX(90deg);
    opacity:0;
	}

.topLanList li a{
    display:inline-block;
    width:100%;
    height:35px;
    line-height:35px;
    font-size:13px;
    font-weight:300;
    color:#fff;
    padding:0 25px;
    text-align:center;
    background-color:#27548a;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
	}

.topLanList li a::before{
    content:"";
    position:absolute;
    bottom:0;
    left:10px;
    width:calc(100% - 20px);
    height:1px;
    background-color:rgba(255, 255, 255, 0.3);
	}

.topLanList li:last-child a::before{position:unset; width:unset; height:unset;}

.topLanList li:hover a{background-color:#00aced;}

.topLanBox.is-open .topLanBtn::after{
	-webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    top:7px;
	}

.topLanBox.is-open .topLanList{
    pointer-events:auto;
    -webkit-transform:rotateX(0deg);
    transform:rotateX(0deg);
    opacity:1;
	}

.topMenuBlock-bottom{
	background-color:rgba(52,77,42,0.6);
	transition:all 0.5s ease;
	display:none;
	}

.top-menu{
	padding-left:0;
	display:flex;
	align-items:center;
	}

.top-menu li{margin-top:-1px;}

.top-menu>li>a{
	display:block;
	color:#000;
	font-size:18px;
	font-weight:bold;
	padding:15px;
	text-shadow:1px 1px 2px #fff;
	}

.topMenuBlock-bottom:hover{background-color:#344d2a;}

header.is-fixed{position:fixed;}
.is-fixed .topMenuBlock-top{background-color:#fff;}

.is-fixed .topMenuBlock-bottom{
	background-color:#344d2a;
	box-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);
	}

/*.is-fixed .mainLogoBox{width:150px;}*/
.is-fixed .topMenuBox .top-menu{margin:0;}
.searchToggleBox{display:none;}

.toggleSearchBtn.is-open .searchToggleBox{display:block;}

.top-menu li.has-drop{/*position:relative;*/}

.top-menu li.has-drop .navDrop{
	display:none;
    width:100%;
    background:-webkit-linear-gradient(#fff,#fff,#dcf2f1);
    background:-o-linear-gradient(#fff,#fff,#dcf2f1);
    background:-moz-linear-gradient(#fff,#fff,#dcf2f1);
    background:linear-gradient(#fff,#fff,#dcf2f1);
    box-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);
    transition:all 0.3s ease;
	position:absolute;
    top:100%;
    left:0;
    z-index:1200;
	}

.navDrop-inner{
	max-width:1280px;
	margin:0 auto;
	padding:30px 20px;
	display:flex;
	}

.top-menu>li:hover>a{
	color:#fff;
	background-color:#60b5ff;
	text-shadow:1px 1px 2px #000;
	}

/*.top-menu li.has-drop:hover .navDrop{display:block;}*/

.top-menu .dropMenuTitle{flex-basis:200px;}

.top-menu .dropMenBlock{flex:1; padding:0 20px;}

.dropMenuTitle .blockTitle-en{
    font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
	}

.dropMenuTitle .blockTitle-en span{
    font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
    color:#0f8a7c;
	}

.dropMenuTitle .blockTitle-tw{
    font-size:18px;
    font-weight:bold;
    margin-top:15px;
	}

.navDropMenu{
	width:100%;
	padding-left:0;
	display:flex;
	flex-wrap:wrap;
	}

.navDropMenu li{width:20%;}

.navDropMenu li a{
	display:block;
	font-size:18px;
	font-weight:bold;
	color:#686868;
	margin:0 7px;
	overflow:hidden;
	position:relative;
	}

.navDropMenu li a .img-cover{padding-bottom:60%;}

.navDropMenuTitle{
    width:100%;
    height:auto;
    padding:10px 15px;
    background-color:rgba(0, 0, 0, 0.65);
    transform:translateY(100%);
    font-size:16px;
    font-weight:500;
    color:#fff;
    letter-spacing:1px;
    transition:all 0.3s ease;
	position:absolute;
    bottom:0;
    left:0;
	}

.navDropMenu li:hover a .navDropMenuTitle{transform:translate(0);}

.top-menu .navDropmenu li a{
	display:block;
	padding:15px;
	}

#bannerS{display:none;}

#mobile{display:none; text-align:left;}

#mobile a{
	letter-spacing:2px;
	position:relative;
	}

ul.navMenuList{padding-left:0;}

ul.navMenuList li{
	background-color:#f7f7f7;
	border-bottom:1px #5f605d solid;
	}

ul.navMenuList li:nth-child(1){border-top:1px #5f605d solid;}

ul.navMenuList li a{color:#5f605d;}

ul.navMenuList li:hover{background-color:#60b5ff;}
ul.navMenuList li:hover a{color:#fff;}

.navmenu-item{width:100%; position:relative;}

.navmenu-item a{
	display:block;
    font-size:18px;
	padding:15px 0 15px 30px;
    color:#5f605d;
    letter-spacing:2px;
	}

.mInquiryBtnBox{
	display:block;
    height:40px;
    border:1px solid #5f605d;
    background-color:#f7f7f7;
	width:calc(100% - 108px);
    margin:25px auto;
	}

.mInquiryBtn{
	display:inline-block;
    width:100%;
    height:100%;
    color:#5f605d;
    font-size:15px;
    font-weight:300;
    letter-spacing:1px;
    line-height:40px;
    text-align:center;
	}

.mInquiryBtnBox:hover{
	border:1px solid #468da3;
    background-color:#468da3;
	}

.mInquiryBtnBox:hover .mInquiryBtn{color:#fff;}

.navMenu-bottom{margin:20px auto;}

.navMenuBottomList{
	padding-left:0;
	display:flex;
	justify-content:center;
	align-items:center;
	}

.loginList li a{
	display:block;
	margin:0 15px;
	padding:10px 20px;
	color:#5f605d;
	border:1px solid #ccc;
	border-radius:5px;
	}

.loginList li:hover a{
	color:#fff;
	background-color:#468da3;
	border:1px solid #468da3;
	}

#mobile ul.iconList li a{
	width:50px;
    height:50px;
    font-size:20px;
    color:#fff;
    margin:0 15px;
    border:1px solid #0f8a7c;
    border-radius:50%;
    background-color:#0f8a7c;
    letter-spacing:0;
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-align-items:center;
    align-items:center;
    transition:all 0.15s ease-in-out;
	}

#mobile ul.iconList li.item-fb:hover a{background-color:#1877f2; border:1px solid #1877f2;}
#mobile ul.iconList li.item-line:hover a{background-color:#00c300; border:1px solid #00c300;}
#mobile ul.iconList li.item-skype:hover a{background-color:#00aaff; border:1px solid #00aaff;}

#mobile ul.mLanList li{
	margin:0 15px;
	background-color:unset;
    border-bottom:none;
	}

#mobile ul.mLanList li a{
	display:block;
	color:#5f605d;
	padding:10px 20px;
	border:1px solid #ccc;
	border-radius:999em;
	}

#mobile ul.mLanList li:hover a{
	color:#fff;
	border:1px solid #60b5ff;
	background-color:#60b5ff;
	}

.navmenu-item.has-navDrop>a::before{
	content:"";
    display:inline-block;
    width:60px;
    height:100%;
    background:#f0f0f2;
    position:absolute;
    top:0;
    right:0;
    border-left:1px solid #ededed;
    z-index:1;
	}

.navmenu-item.has-navDrop>a::after{
	content:"+";
	font-size:20px;
	position:absolute;
    top:30%;
    left:auto;
    right:22px;
    z-index:10;
	}

.navmenu-item.has-navDrop:hover>a::after{color:#5f605d;}
.navmenu-item.has-navDrop:hover>a.is-open::after{
	content:"-";
	font-size:28px;
	top:20%;
	}

/*次選單drop-menu_start*/
li.has-dropmenu{position:relative;}

.has-dropmenu ul.drop-menu{
	opacity:0;
    visibility:hidden;
    -webkit-transform-origin:0% 0%;
    -moz-transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    -o-transform-origin:0% 0%;
    transform-origin:0% 0%;
    -webkit-transition:-webkit-transform .3s,opacity .3s;
    -moz-transition:-moz-transform .3s,opacity .3s;
    -ms-transition:-ms-transform .3s,opacity .3s;
    -o-transition:-o-transform .3s,opacity .3s;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:rotateX(-75deg);
    -moz-transform:rotateX(-75deg);
    -o-transform:rotateX(-75deg);
    transform:rotateX(-75deg);
	}

.has-dropmenu ul.drop-menu{
	position:absolute;
    top:40px;
    left:0;
    z-index:100;
    width:155px;
    margin:0;
    padding:10px 0;
    font-size:0.9rem;
    background:#fff;
    border:0 solid #e9ecef;
    box-shadow:0 0.25rem 0.75rem rgb(0 0 0 / 25%);
	}

li.has-dropmenu:hover ul.drop-menu{
	opacity:1;
    visibility:visible;
    -webkit-transform:rotateX(0deg);
    -moz-transform:rotateX(0deg);
    -o-transform:rotateX(0deg);
    transform:rotateX(0deg);
	}

ul.drop-menu>li a{
	display:block;
	line-height:35px;
	padding:5px 15px;
	white-space:nowrap;
	}

ul.drop-menu>li:hover a{background-color:rgba(94, 175, 202, 0.3);}

ul.drop-menu>li a::after, ul.mega-menu>li a::after{content:none;}
/*次選單drop-menu_end*/

/*手機次選單_start*/
#mobile ul.mobile-dropmenu{
	padding-left:0;
	margin:0;
	}

#mobile ul.mobile-dropmenu li{
	width:100%;
	background-color:#486371;
	}

#mobile ul.mobile-dropmenu li:hover{background-color:#668bc4;}

#mobile ul.mobile-dropmenu li a{color:#fff;}
/*手機次選單_end*/

.caret{margin-top:7px; margin-left:5px;}

.mobile-menu{width:100%;}

.mobile-menu li{
	width:50%;
	padding:15px 0;
	font-size:16px;
	color:5f605d;
	font-weight:bold;
	background-color: #ffffffde;
	}

.mobile-menu li a{color:#5f605d;}

/* 手機選單按鈕_start */
.menuBtnBox{
	display:none;
	position:absolute;
	top:15px;
	right:15px;
	z-index:1100;
	}

.menuBtn{
	display:block;
	--front:#f9f9f9;
	--back:#ccc;
	--icon:white;
	perspective:600px;
	width:48px;
	height:48px;
	position:relative;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	}

.menuBtn input{display:none;}

.menuBtn input + div span {
	--rotateY: 0deg;
	--background: var(--front);
	transform: rotateY(var(--rotateY));
	transform-style: preserve-3d;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background:#ccc;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform 0.6s cubic-bezier(0.2, 0.64, 0.48, 1.24);
	}

.menuBtn input + div span:before, .menuBtn input + div span:after {
	--rotate: 0deg;
	content: "";
	position: absolute;
	width: 16px;
	height: 2px;
	border-radius: 1px;
	top: 50%;
	left: 50%;
	background: var(--icon);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate(-50%, -50%) rotate(var(--rotate)) translateZ(6px);
	}

.menuBtn input + div span:first-child{--background:var(--back);}

.menuBtn input + div span:first-child:before{--rotate:-45deg;}

.menuBtn input + div span:first-child:after{--rotate:45deg;}

.menuBtn input + div span:last-child{--rotateY:180deg;}

.menuBtn input + div span:last-child:before{
	box-shadow:0 -5px 0 var(--icon), 0 5px 0 var(--icon);
	}

.menuBtn input + div span:last-child:after{display:none;}

.menuBtn input:checked + div span:first-child{--rotateY:-180deg;}

.menuBtn input:checked + div span:last-child{--rotateY:0deg;}

.toggleSearchBtn{
	display:none;
	position:absolute;
	top:10px;
	right:80px;
	z-index:1100;
	}

.nav-open .toggleSearchBtn{display:none;}
.nav-open .searchToggleBlock{display:none;}

.toggleSearchBtn a{
	display:block;
	color:#bfbfbf;
	padding:15px;
	}

.toggleSearchBtn i{font-size:24px;}

.searchToggleBox{
	display:none;
	width:90%;
	margin:0 auto;
	position:absolute;
    top:110px;
    left:0;
    right:0;
    z-index:100;
	}

.searchToggleBox:after{
    height:11px;
    width:21px;
    position:absolute;
    content:"";
    background:url(../images/tip.png) no-repeat 0 0 / 21px 11px;
    right:55px;
    top:-10px;
    display:block;
	}

.mobileSearch-open .searchToggleBox{display:block;}

.searchToggleBox input{
    width:100%;
    height:40px;
    padding:5px 35px 4px 15px;
    color:rgb(176, 176, 176);
	border-radius:4px;
    border:1px solid rgb(188, 188, 188);
    outline:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#fff;
	}

.searchToggleBox button{
	background:none;
    border:none;
    padding:0;
    outline:0;
	position:absolute;
	top:12px;
	right:15px;
	}

/* 手機選單按鈕_end */

/* 首頁輪播模組_start */
.banner-L{position:relative; overflow:hidden;}
.banner-S{display:none;}

.swiper-container-outside{position:relative;}

.bannerCover{
	display:block;
    height:0;
    text-align:center;
    padding-bottom:100vh;
    overflow:hidden;
    position:relative;
	}

.bannerCover>img{
	max-width:100%;
    min-width:100%;
    height:100%;
    object-fit:cover;
    -moz-object-fit:cover;
    -ms-object-fit:cover;
    -o-object-fit:cover;
    -webkit-object-fit:cover;
    position:absolute;
    transform:translate(-50% , 0) scale(1);
    transition:all 0.3s;
	}

.bannerTitle{
	width:600px;
	margin-left:-300px;
	text-align:center;
	position:absolute;
	left:50%;
	bottom:30%;
	z-index:5;
	}

.mask{overflow:hidden; position:relative;}

.bannerBox{width:100%; height:3em;}

.bannerTitle-main{
	font-size:48px;
	font-weight:bolder;
	color:#fff;
	text-shadow:1px 1px 5px #000;
	}

.bannerTitle-sub{
	font-size:36px;
	color:#fff;
	text-shadow:1px 1px 5px #000;
	}

.bannerBox-inner{
	position:absolute;
	width:100%;
	line-height:1.5em;
	}

.swiper-slide-active .bannerTitle-main .bannerBox-inner{
	animation:3s ease-out alternate both animation-2-name;
	}

.swiper-slide-active .bannerTitle-sub .bannerBox-inner{
	animation:3s ease-out alternate both animation-2-title;
	}

.banner-L .swiper-button-prev,
.banner-L .swiper-container-rtl .swiper-button-next{
	left:70px;
	font-weight:bold;
	}

.banner-L .swiper-button-next,
.banner-L .swiper-container-rtl .swiper-button-prev{
	right:70px;
	font-weight:600;
	}

.banner-L .swiper-button-prev:after,
.banner-L .swiper-button-next:after{
	font-size:24px;
	font-weight:500;
    padding:5px 10px;
    border:1px solid var(--swiper-navigation-color,var(--swiper-theme-color));
    position:absolute;
	}

.banner-L .swiper-button-prev:after{left:-50px;}
.banner-L .swiper-button-next:after{right:-50px;}

@keyframes animation-2-name{
	0%{transform:translate3d(0, 100%, 0);}
	30%{transform:translate3d(0, 100%, 0);}
	80%{transform:translate3d(0, 0, 0);}
	}

@keyframes animation-2-title{
	0%{transform:translate3d(0, -100%, 0);}
	30%{transform:translate3d(0, -100%, 0);}
	80%{transform:translate3d(0, 0, 0);}
	}

/* 首頁輪播模組_end */

#contentBg{height:auto; width:100%;}

#content{margin:0 auto; overflow:hidden; min-height:700px;}

#navlist{
	background-color:#7d7d7d;
	line-height:3.5em;
	min-height:2em;
	position:inherit;
    width:100%; padding:0;
    background-image:linear-gradient(180deg,#efefef,#e4e4e4 25%);
    border-top:1px #ccc solid;
    display:none;
}
#navlist a{transition:all 0.2s ease;}

#navlist a:hover{color:#a0a0a0;}

#navlist_mobile{
	display:none;
	background-color:#727271;
	}

#navlist_mobile >ul{
	box-sizing: border-box;
	padding-left:30px;
	}

#navlist_mobile >ul li{
	background: url(images/icon_mobile.png) no-repeat left;
	border-bottom:1px #210000 dashed;
	height:55px;
	box-sizing:border-box;
	padding:20px 0 0 30px;
}

#navlist_mobile >ul li a{color:#fff;}

#contentBox{
	position:relative;
	overflow:inherit;
	animation:fadeIn 0.5s ease-in-out 1;
	}

@keyframes fadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
	}

#navlist ul{ text-align: center;}

#navlist > ul > li{
  	background:url(images/icon.png) no-repeat left;
 	padding:0 0 0 20px;
 	display: inline-block;
 	position:relative;
}

#navlist>ul>li > ul{
    background:#cccccc;
    position:absolute;
    z-index:99;
    left:0;
    top:55px;
    min-width:100%;
    padding:0 5px;
    line-height:40px;
}

#navlist>ul>li>ul li{border-bottom:1px #fff solid;}

#navlist>ul>li>ul a:hover{color:#ffffff;}

#navlist ul li>ul{display:none;}/*隱藏次選單*/

#navlist ul li>ul:hover{display:block;}/*滑鼠滑入展開次選單*/

/* 首頁熱門產品區_start */
.productSection{
    position:relative;
    width:100%;
    padding:80px 0;
	}

.indexProductBlock{
	width:95%;
	max-width:1280px;
	margin:0 auto;
	display:flex;
	}

.productSection .blockTtileBox{margin-right:30px;}

.arrowBox{
	margin-top:50px;
	margin-right:20px;
	display:flex;
	align-items:center;
    justify-content:space-between;
    }

.arrowBox .swiper-button-prev,
.arrowBox .swiper-button-next{
    width:100px;
    color:#fff;
    padding:12px 25px;
    background-color:#008cd6;
    border-radius:999em;
    position:relative;
    top:unset;
    bottom:unset;
    left:unset;
    right:unset;
	}

.arrowBox .swiper-button-prev::after,
.arrowBox .swiper-button-next::after{
	font-size:20px;
	}

.indexProductContent{
	flex:1;
	overflow:hidden;
	position:relative;
	}

.productSection .swiper-slide a{
	display:block;
	margin:10px;
	padding-bottom:20px;
	transition:box-shadow .3s ease-in-out;
	}

.slideProInfo{margin:15px 0 0; padding-left:10px;}

.slideProInfo p{font-size:20px; font-weight:bold;}

.swiper-slide:hover a{box-shadow:5px 5px 0 1px #008cd6;}

/* 首頁熱門產品區_end */

/* 首頁形象主圖區_start */
.mainSpiritSection{
    position:relative;
    width:100%;
    padding:50px 0;
	}

.mainSpiritSection .mainSpirit__in{
    will-change:width;
    position:relative;
    z-index:1;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:60%;
    height:540px;
    margin:0 auto;
    overflow:hidden;
    -webkit-transition:width .6s .3s ease;
    transition:width .6s .3s ease;
	}

.mainSpiritSection .mainSpirit__bg{
    position:absolute;
    z-index:-1;
    top:-100%;
    bottom:-100%;
    left:-100%;
    right:-100%;
    display:block;
    width:100vw;
    height:100%;
    margin:auto;
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    -webkit-transition:-webkit-transform .6s .3s ease;
    transition:-webkit-transform .6s .3s ease;
    transition:transform .6s .3s ease;
    transition:transform .6s .3s ease, -webkit-transform .6s .3s ease;
	}

.mainSpiritSection .mainSpirit__bg img,
.mainSpiritSection .mainSpirit__bg source{
    width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
	}

.mainSpiritSection .mainSpirit__block{
    margin-left:auto;
    margin-right:6%;
    -webkit-transform:translate(0, 40%);
    transform:translate(0, 40%);
    opacity:0;
    -webkit-transition:opacity .3s ease,-webkit-transform .3s ease;
    transition:opacity .3s ease,-webkit-transform .3s ease;
    transition:opacity .3s ease,transform .3s ease;
    transition:opacity .3s ease,transform .3s ease,-webkit-transform .3s ease;
	}

.mainSpirit__block h3{
	font-size:48px;
	font-weight:bold;
	color:#fff;
	}

.mainSpirit__block p{
	font-size:28px;
	font-weight:bold;
	color:#fff;
	}

.mainSpiritBtn{margin-top:30px;}

.btn-link{
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    line-height:1.7;
    font-style:normal;
    letter-spacing:0.05em;
    font-size:18px;
    font-weight:600;
    color:#27548a;
    text-decoration:none;
	}

.mainSpiritSection .btn-link{color:#fff;}

.btn-link .btn-link__ico{
    position:relative;
    width:40px;
    height:40px;
    margin-right:10px;
    border-radius:50%;
    background-color:#5a5a5a;
    -webkit-transition:background-color .25s ease;
    transition:background-color .25s ease;
	}

.btn-link .btn-link__ico::before,
.btn-link .btn-link__ico::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:block;
    width:10px;
    height:1px;
    margin:auto;
    background-color:#fff;
    -webkit-transition:-webkit-transform .25s ease;
    transition:-webkit-transform .25s ease;
    transition:transform .25s ease;
    transition:transform .25s ease, -webkit-transform .25s ease;
	}

.btn-link .btn-link__ico::before{
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
	}

.mainSpiritSection .btn-link:hover{color:#fff;}

.btn-link:hover{color:#008cd6;}

.btn-link:hover .btn-link__ico{background-color:#008cd6;}

.btn-link:hover .btn-link__ico::before{
    -webkit-transform:rotate(450deg);
    transform:rotate(450deg);
	}

.btn-link:hover .btn-link__ico::after{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
	}

.mainSpiritSection .mainSpirit__in.active {
    width:96%;
    -webkit-transition-delay:0s;
    transition-delay:0s;
	}

.mainSpiritSection .mainSpirit__bg.active {
    -webkit-transform:scale(1);
    transform:scale(1);
    -webkit-transition-delay:0s;
    transition-delay:0s;
	}

.mainSpiritSection .mainSpirit__block.active{
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    opacity:1;
    -webkit-transition-duration:0.6s;
    transition-duration:0.6s;
    -webkit-transition-delay:0.6s;
    transition-delay:0.6s;
    text-shadow:1px 1px 5px #000;
	}
/* 首頁形象主圖區_end */

/* 首頁關於我們_start */
.indexAboutSection{
    position:relative;
    width:100%;
    padding:50px 0 80px;
    overflow:hidden;
	}

.indexAboutBlock{
	width:95%;
	max-width:1000px;
	margin:0 auto;
	display:flex;
	background-color:#fff;
	box-shadow:0 1rem 2rem 0 rgba(0, 0, 0, 0.3);
	}

.indexAboutPic{
	flex-basis:550px;
	overflow:hidden;
	position:relative;
	z-index:1;
	}

.indexAboutContent{flex:1; padding:40px 20px 40px 0;}

.indexAboutPic>.img-cover{padding-bottom:70%;}

.indexAboutPic::after{
	content:"";
    background-color:#fff;
    width:600px;
    height:150%;
    z-index:5;
    position:absolute;
    right:-500px;
    top:20px;
    -webkit-transform: rotate(15deg) translateX(0);
    transform: rotate(15deg) translateX(0);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
    transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
    transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
    transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s, -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
	}

.indexAboutBlock:hover .indexAboutPic .img-cover>img{
    -webkit-transform:translate(-50% , 0) scale(1.05);
    transform:translate(-50% , 0) scale(1.05);
	}

.indexAboutBlock:hover .indexAboutPic::after{
    -webkit-animation:pagePaper 0.3s ease-out 0s;
    animation:pagePaper 0.3s ease-out 0s;
	}

@keyframes pagePaper{
	0%{
		-webkit-transform: rotate(15deg) translateX(0);
		transform: rotate(15deg) translateX(0);
	}
	50%{
		-webkit-transform: rotate(15deg) translateX(-10px);
		transform: rotate(15deg) translateX(-10px);
	}
	100%{
		-webkit-transform: rotate(15deg) translateX(0);
		transform: rotate(15deg) translateX(0);
	}
}

.indexAboutContent .blockTitle-en{
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
	}

.indexAboutContent .blockTitle-en span{
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
	color:#008cd6;
	}

.indexAboutContent .blockTitle-tw{
	font-size:18px;
    font-weight:bold;
    margin-top:15px;
    margin-bottom:25px;
	}

.indexAboutNarrative p{
    display:-webkit-box;
    width:100%;
    height:4.5em;
    line-height:1.5em;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:16px;
    margin:0;
	}

/* 首頁關於我們_end */

/* 首頁最新消息區_start */
.newsSection{
    position:relative;
    width:100%;
    padding:50px 0;
    background-color:#f6f7f9;
	}

.newsBlock{
	width:95%;
	max-width:1000px;
	margin:0 auto;
	display:flex;
	}

.blockTitleBox{
	flex-basis:250px;
	position:relative;
	}

.newsListContent{flex:1; position:relative;}

.blockTitleBox .blockTitle-en{
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
	}

.blockTitleBox .blockTitle-en span{
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
	color:#008cd6;
	}

.blockTitleBox .blockTitle-tw{
	font-size:18px;
    font-weight:bold;
    margin-top:15px;
	}

.newsSectionBtn{margin-top:30px;}

.newsList{padding-left:0; list-style:none;}

.newsList li{
	margin-bottom:20px;
	padding:10px 10px 20px 0;
	border-bottom:2px dotted #ccc;
	position:relative;
	}

.newsList li:last-child{border-bottom:none;}

.newsList li a{display:flex; align-items:center;}

.newsItemCover{flex-basis:300px; margin-right:15px;}

.newsItemContent{flex:1;}

.newsDate{
    font-size:16px;
    font-weight:bold;
    color:#686868;
	}

.newsTitle{
    font-size:24px;
    font-weight:bold;
    margin-top:10px;
    margin-bottom:10px;
    color:#27548a;
	}

.newsNarrative p{
    display:-webkit-box;
    width:100%;
    height:3.6em;
    line-height:1.8em;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:16px;
    margin:0;
	}

.newsMoreBtnBlock{margin-top:20px; display:flex; justify-content:flex-end;}

.newsMoreBtn{
	padding:10px 25px;
	border:1px solid rgba(0,140,214,0.5);
	border-radius:999em;
	transition:all 0.5s ease 0s;
	position:relative;
	}

.newsList li:hover .newsTitle{color:#008cd6;}

.newsList li:hover .newsItemCover .img-cover>img{
    transform:translate(-50% , 0) scale(1.1);
	}

.newsList li:hover .newsMoreBtn{
	color:#fff;
	background-color:#008cd6;
	border:1px solid #008cd6;
	}

/* 首頁最新消息區_end */

/*footer_start*/
footer{
	background-size:cover;
	background-position:center left;
	background-repeat:no-repeat;
	padding:30px 0 20px;
	position:relative;
	}

footer ul{padding-left:0; list-style:none;}

footer i{margin-right:8px;}

footer a, footer i{
	color:#fff;
	transition:all 0.4s ease;
	line-height:1em;
	}
	
footer a:hover{color:#00ccff;}

.footArea{width:90%; max-width:960px; margin:0 auto;}

.footBlock{display:flex; justify-content:space-between;}

.footBlock-top{flex-direction:row-reverse;}

.footBox-mainInfo{display:flex; flex-direction:column;}

.footInfoTitle{
	font-size:14px;
	color:#fff;
	padding:3px 15px;
	border:1px solid #fff;
	border-radius:999em;
	display:inline-block;
	}

.footInfoList, .policyList{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
	}

.footInfoList li{margin:10px 20px 10px 0;}

.mainInfo-top .footInfoList li a{font-size:22px; font-family:'Open Sans', sans-serif;}

.mainInfo-bottom .footInfoList li a{font-size:14px;}

.footBox-siteMap{flex-basis:500px; display:flex;}
.footBox-policy{flex:1;}

.footBoxContent-title{
	font-size:18px;
	font-weight:bold;
	color:#fff;
	margin-bottom:5px;
	}

.footBoxContent-txt p{font-size:15px; color:#fff;}

.siteMapList{display:flex; flex-wrap:wrap;}

.siteMapList li{
	font-size:16px;
	line-height:20px;
	margin-top:7px;
	margin-right:15px;
	padding-left:12px;
	position:relative;
	}

.siteMapList li::before{
	content:"-";
	color:#fff;
	position:absolute;
	top:0;
	left:0;
	}

.footBlock-bottom{
	padding:10px 10px 0;
	margin-top:10px;
	border-top:1px solid rgba(255,255,255,0.3);
	align-items:flex-end;
	}

.siteMapBox, .footBox-logo{position:relative;}

.footBox-logo a{display:block;}

.footIconList{margin-bottom:10px; display:flex; justify-content:flex-end;}

.footIconList li a{
    width:35px;
    height:35px;
    font-size:18px;
    margin:0 5px;
    border-radius:50%;
    background-color:#fff;
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-align-items:center;
    align-items:center;
    transition:all 0.15s ease-in-out;
	}

.footIconList li a i{color:#0f8a7c; margin-right:0;}

.footIconList li:hover a{background-color:#004986;}
.footIconList li:hover a i{color:#fff;}

.policyList{justify-content:flex-end;}

.policyList li{margin:10px 0 10px 15px;}

.policyList li a{font-size:14px;}

.footBox-policy{
	display:flex;
    flex-direction:column;
    align-items:flex-end;
    }

.footBox-policy .ccin{
    font-size:12px;
    color:#fff;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
	}

.footBox-policy .ccin a{
    font-size:12px;
    color:#fff;
	}

.footBox-policy .ccin a:hover{color:#004986;}

.gotop{
	width:60px;
    height:60px;
    background-color:#008cd6;
	position:fixed;
	bottom:15px;
	z-index:999;
	}

#gotop{
	height:100%;
    font-size:14px;
	color:#fff;
	display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-direction:column;
    flex-direction:column;
	position:relative;
	}

#gotop::before{
    display:block;
    content:"";
    width:10px;
    height:10px;
    margin-bottom:3px;
    border:1px solid #fff;
    border-width:1px 1px 0 0;
    transform:rotate(-45deg);
	}

#gotop:hover::before {
    animation: up_down_arrow 1s infinite ease-in-out;
	}

@keyframes up_down_arrow{
	0%{margin-top:0;}
	50%{margin-top:-15px;}
	}

/*footer_end*/

/*頁面編輯設定_start*/
.pageContentArea{padding:0 0 80px; position:relative;}

.sloganTitle{
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    position:absolute;
    top:0;
	}

.pageContentBlock{
	width:90%;
	max-width:1080px;
	min-height:350px;
	margin:0 auto;
	position:relative;
	z-index:5;
	}

.error404{text-align:center;}
.error404 img{margin-bottom:60px;}

.error404 h1{
    font-size:50px;
    font-weight:bold;
    text-transform:uppercase;
	}

.image-show-box>.box-inner{margin:10px;}

.image-show-box p{
	text-align:center;
	font-size:20px;
	font-weight:600;
	color:#8b0000;
	}

.contentEditBlock h4{font-size:22px; font-weight:600;}

.contentEditBlock h5{
	font-size:20px;
	font-weight:600;
	margin-bottom:10px;
	}

.page-eidt-area h4{
	font-size:24px;
	font-weight:600;
	margin-bottom:7px;
	}

.contentEditBlock{padding:50px 0;}

.contentEditBlock p,
.contentEditBlock ul li{
	font-size:18px;
	font-weight:500;
	line-height:1.8em;
	}

.contentEditBlock ul{margin:10px 0;}

.contentEditBlock ul li{margin-bottom:5px;}

.backBtnBlock{margin-top:30px; display:flex; justify-content:flex-end;}

.backBtnBox{
	border:1px solid #004986;
	background-color:rgba(0,140,214,0);
	position:relative;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
	}

.backBtnBox a{
	display:block;
	font-size:16px;
	font-weight:700;
	color:#004986;
	padding:15px 0;
	}

.backBtnBox span{
    display:inline-block;
	color:#004986;
    padding-left:70px;
    padding-right:20px;
    position:relative;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
	}

.backBtnBox span::before{
    position:absolute;
    left:23px;
    top:3px;
    bottom:0;
    margin:auto;
    content:"";
    z-index:4;
    height:1px;
    width:40px;
    background:#004986;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
	}

.backBtnBox span::after{
    position: absolute;
    left: 24px;
    top: 3px;
    bottom: 0;
    margin: auto;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 1px solid #004986;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    z-index: 5;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

.backBtnBox:hover{background-color:rgba(0,140,214,1);}
.backBtnBox:hover span{color:#fff; padding-left:60px; padding-right:30px}
.backBtnBox:hover span::before{width:30px; background:#fff;}
.backBtnBox:hover span::after{border-top: 1px solid #fff;}

.pageTabListBlock{width:90%; max-width:1080px; margin:0 auto;}

.pageTabList{display:flex; justify-content:center; flex-wrap:wrap;}

.pageTabList li{margin-right:15px; margin-bottom:5px; position:relative;}
.pageTabList li:last-child{margin-right:0;}

.pageTabList li .box__inner{
	padding:12px 20px;
	border:1px solid rgba(0,140,215,0.5);
	border-radius:5px;
	transition:all 0.5s ease 0s;
	}

.pageTabList li span{
	font-size:14px;
	color:#18306a;
	letter-spacing:1px;
	line-height:1em;
	}

.pageTabList li:hover .box__inner{
	background-color:#008cd6;
	border:1px solid #008cd6;
	}

.pageTabList li:hover span{color:#fff;}

/*頁面編輯設定_end*/

/* pageBanner_start */
.pageBannerBlock{
	width:100%;
	height:220px;
	margin-top:85px;
	overflow:hidden;
	position:relative;
	}

.pageBannerBox{
	width:100%;
	max-width:1080px;
	height:100%;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	z-index:5;
	}

.pageBannerBox h3.pageBannerTitle-main{
	display:inline-block;
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
    margin-top:50px;
    padding:0 30px 5px;
    background-color:#fff;
    position:relative;
    z-index:10;
	}

.pageBannerBox h3.pageBannerTitle-main span{
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
    color:#008cd6;
	}

.pageBannerBox h3.pageBannerTitle-sub{
	font-size:22px;
    font-weight:bold;
    color:#fff;
    margin-top:20px;
    padding-left:40px;
    position:relative;
	}

.pageBannerBox h3.pageBannerTitle-main::after{
	width:0;
    height:0;
    content:"";
    border-style:solid;
    border-width:0 0 72px 27px;
    border-color:transparent transparent transparent rgba(255,255,255,1);
    position:absolute;
    top:0;
    right:-26px;
	}

/*.pageBannerBox h3.pageBannerTitle-sub::after{
	content:"";
	width:70%;
	height:1px;
	background-color:#fff;
	position:absolute;
	left:20px;
	bottom:-10px;
	z-index:10;
	}*/

.pageBannerCoverBox{
	width:85%;
	height:220px;
	transform:skewX(-20deg);
	overflow:hidden;
	position:absolute;
	top:0;
	right:-15%;
	z-index:5;
	display:none;
	}

.pageBannerCover{
	width:100%;
	height:100%;
	position:relative;
	}

.pageBannerCover__in{
	width:100%;
	height:100%;
	background-image:url(../images/pageBanner-1.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	transform:skewX(20deg);
	position:absolute;
	top:0;
	left:-10%;
	}

#particles-js{
	width:100%;
	height:100%;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	position:absolute;
	top:0;
	z-index:1;
	display:none;
}

.pageBanner-bg{
	width:100%;
	height:100%;
	background-image:url(../images/page-banner-bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    animation:gradient 15s ease infinite;
    position:absolute;
    top:0;
    z-index:-1;
	}

/* pageBanner_end */

/* bread_start */
.breadBlock{
	width:90%;
	max-width:1080px;
	margin:0 auto;
	}

.breadBlock ol{
    width:-moz-max-content;
    width:max-content;
    margin-left:auto;
    margin-bottom:0;
    padding:25px 15px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
	}

.breadBlock ol li a{position:relative; color:#868686;}

.breadBlock ol li i{margin-right:7px;}

.breadBlock ol li a::after{
    font-size:14px;
    font-weight:600;
    color:#555;
    transition:all 0.4s ease;
    text-transform:uppercase;
	}

.breadBlock ol li a::after{
    content:"/";
    padding-right:7px;
    padding-left:5px;
    color:#ccc;
	}

.breadBlock ol li:hover i{color:#0072af;}
.breadBlock a:hover span{color:#0072af;}

/* bread_end */

/* 分頁關於我們_start */
.pageAboutBlock-row{align-items:center;}

.pageAboutBlock-txt{flex:1;}
.pageAboutBlock-pic{flex-basis:450px;}

.pageAboutBlock-pic img{width:100%;}

.artcileImg img{width:33.333%;}
/* 分頁關於我們_end */

/* 分頁ESG_start */
.pageEsgContentArea{padding:0;}

.pageSpiritSection{
	padding:50px 0;
	background-image:url(../images/pageSlideSection-bg.jpg);
	background-size:cover;
	background-position:center;
	}

.pageSpiritBlock{width:90%; max-width:1080px; margin:0 auto;}

.pageSpiritBlock-row{display:flex; align-items:center;}

.spiritMainCoverBlock{flex-basis:485px; margin-right:30px; position:relative;}

.spiritMainCoverBlock::before{
	content:"";
	width:485px;
	height:485px;
	background-image:url(../images/circle_items.png);
	background-size:cover;
	background-position:center;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	}

.spiritMainCoverBlock .centerBox{height:485px; position:relative; z-index:1;}

.spiritMainCoverBlock .centerBox__inner{
    height:100%;
    padding:4%;
    overflow:hidden;
    transition:all 0.5s;
    display:block;
	position:relative;
    }

.spiritMainCoverBlock .centerBox__inner::before{
	content:"";
	width:calc(100% - 4px);
	height:100%;
	background:url(../images/circle2.png) no-repeat center center/100%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	-webkit-animation:rotateCenter 15s linear infinite;
	animation:rotateCenter 15s linear infinite;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	z-index:1;
	}

.spiritMainCoverBlock .circle{
	height:100%;
	border-radius:50%;
    overflow:hidden;
    background-image:url(../images/circle_bg.jpg);
    background-size:cover;
    background-position:center;
    border:12px solid #f6f8f7;
    transition:all 0.5s;
    display:-ms-flexbox;
    display:flex;
    flex-direction:column;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
	}

.circle-logo{width:150px;}

.circleTitle-tw{
	font-size:28px;
	font-weight:bold;
	color:#fff;
	margin-top:15px;
	margin-bottom:10px;
	}

.circleTitle-en{
	font-size:36px;
	font-family:'Oswald', sans-serif;
	color:#fff;
	}

.spiritMainCoverBlock .circle::before{
	content:"";
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    width:calc(100% + 8px);
    height:calc(100% + 8px);
    background:url(../images/circle.png) no-repeat center center / 100%;
    transition:all 0.5s;
    -webkit-animation:rotateCenter2 14s linear infinite;
    animation:rotateCenter2 14s linear infinite;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    z-index:1;
	}

@keyframes rotateCenter{
	0%{
		-webkit-transform:translate(-50%, -50%) rotate(0deg);
		transform:translate(-50%, -50%) rotate(0deg);
		}
	100%{
		-webkit-transform:translate(-50%, -50%) rotate(-360deg);
		transform:translate(-50%, -50%) rotate(-360deg);
		}
	}

@keyframes rotateCenter2{
	0%{
		-webkit-transform:translate(-50%, -50%) rotate(0deg);
		transform:translate(-50%, -50%) rotate(0deg);
		}
	100%{
		-webkit-transform:translate(-50%, -50%) rotate(360deg);
		transform:translate(-50%, -50%) rotate(360deg);
		}
	}

.pageSpiritListBlock{flex:1; position:relative;}

.pageSpiritList li{padding:15px; margin-bottom:10px; position:relative;}
.pageSpiritList li:last-child{margin-bottom:0;}

.pageSpiritList li::after{
	content:"";
	width:100%;
	height:100%;
	border:6px solid rgba(160,215,130,0.75);
	border-radius:45px;
	transition:all 0.5s ease 0s;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	}

.pageSpiritList li .box__inner{
	padding:15px 20px;
	border:3px solid #008cd6;
	border-radius:30px;
	background-color:rgba(255,255,255,0.75);
	position:relative;
	z-index:3;
	}

.pageSpiritTitle{padding-left:80px; position:relative;}

.pageSpiritTitle::before{
	content:"";
	width:50px;
	height:50px;
	background-size:cover;
	position:absolute;
	top:10px;
	left:10px;
	z-index:5;
	}

.pageSpiritList li:nth-child(1) .pageSpiritTitle::before{background-image:url(../images/esg-icon-1.png);}
.pageSpiritList li:nth-child(2) .pageSpiritTitle::before{background-image:url(../images/esg-icon-2.png);}
.pageSpiritList li:nth-child(3) .pageSpiritTitle::before{background-image:url(../images/esg-icon-3.png);}

.pageSpiritTitle::after{
	content:"";
	width:70px;
	height:70px;
	border-radius:5px;
	position:absolute;
	top:0;
	left:0;
	z-index:3;
	}

.pageSpiritList li:nth-child(1) .pageSpiritTitle::after{background-color:#5d8736;}
.pageSpiritList li:nth-child(2) .pageSpiritTitle::after{background-color:#27548a;}
.pageSpiritList li:nth-child(3) .pageSpiritTitle::after{background-color:#ff894f;}

.pageSpiritTitle-en{
	font-size:28px;
	font-family:'Oswald', sans-serif;
	line-height:1em;
	}

.pageSpiritTitle-en span{
	font-size:36px;
	color:#008cd6;
	font-family:'Oswald', sans-serif;
	line-height:1em;
	}

.pageSpiritTitle-tw{
	font-size:28px;
	margin-top:7px;
	padding-left:20px;
	line-height:1em;
	}

.pageSpiritContent{
	padding-top:10px;
	margin-top:5px;
	border-top:1px solid #ddd;
	}

.pageSpiritContent p{font-size:16px; line-height:1.5em;}

.pageSpiritList li:hover::after{opacity:1;}

/* 分頁ESG_end */

/* 分頁減碳_start */
.carbonList{display:flex; flex-wrap:wrap;}

.carbonList li{width:25%; padding:10px;}

.carbonList li .box__inner{
	min-height:215px;
	padding:10px;
	border:1px solid #ddd;
	border-radius:10px;
	background:linear-gradient(to bottom,#fff,#fff,#c4e1f6);
    background:-moz-linear-gradient(to bottom,#fff,#fff,#c4e1f6);
    background:-o-linear-gradient(to bottom,#fff,#fff,#c4e1f6);
    background:-webkit-linear-gradient(to bottom,#fff,#fff,#c4e1f6);
    transition:all 0.5s ease 0s;
	}

.carbonList li:hover .box__inner{
	box-shadow:0px 0px 16px rgba(0, 0, 0, 0.3);
	}

/* 分頁減碳_end */

/* 分頁歷史沿革_start */
.histroyBlock{max-width:800px;}

.histroyList{
	border-left:2px dotted #ccc;
	display:flex;
    flex-direction:column-reverse;
	}

.histroyList li{
	padding-left:30px;
	margin-bottom:50px!important;
	display:flex;
	align-items:flex-start;
	position:relative;
	}

.histroyList li:nth-child(1){margin-bottom:0!important;}

.histroyList li::before{
	content:"";
    transform:translateY(-43%);
    background-color:#008cd6;
    border:solid 3px #fff;
    width:18px;
    height:18px;
    box-shadow:0 0 0 2px #ccc;
    border-radius:100vh;
    position:absolute;
    top:32px;
    left:-10px;
    z-index:2;
    }

.histroyList li:nth-child(1)::after{
    content:"";
    width:26px;
    height:calc(100% - 32px);
    background-color:#fff;
    position:absolute;
    top:32px;
    left:-14px;
    z-index:1;
	}

.histroy-year{
	font-size:20px;
	font-family:'Oswald', sans-serif;
	padding:15px 20px;
	margin-right:15px;
	line-height:1.5em;
	background-color:#e5e5e5;
	border-radius:5px;
	transition:all 0.5s ease 0s;
	display:inline-block;
	}

.histroy-txt{
	flex:1;
	padding:15px 20px;
	line-height:1.5em;
	border:1px solid rgba(0, 140, 215, 0.5);
	border-radius:5px;
	transition:all 0.5s ease 0s;
	}

.histroyList li:hover .histroy-year{color:#fff; background-color:#008cd6;}

.histroyList li:hover .histroy-txt{
	box-shadow:0px 0px 16px rgba(0, 0, 0, 0.3);
	}

/* 分頁歷史沿革_end */

/* 分頁製程介紹_start */
.formingStepListBlock{position:relative;}

.formingStepListBlock::before{
	content:"";
	width:4px;
	height:20px;
	background-color:#fff;
	position:absolute;
	top:0;
	left:49.7%;
	z-index:3;
	}

.formingStepListBlock::after{
	content:"";
	width:50%;
	height:100%;
	border-right:2px dotted #ccc;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    }

.formingStepList{position:relative; z-index:5;}

.formingStepList li{
	width:50%;
	margin-bottom:50px!important;
	position:relative;
	}

.formingStepList li:nth-child(even){left:50%;}

.formingStepList li::before{
	content:"";
    transform:translateY(-43%);
    background-color:#008cd6;
    border:3px solid #fff;
    width:18px;
    height:18px;
    box-shadow:0 0 0 2px #ccc;
    border-radius:100vh;
    position:absolute;
    top:23px;
    left:-10px;
    z-index:2;
    }

.formingStepList li:nth-child(odd)::before{right:-8px; left:unset;}

.formingStepGoal{
    width:65px;
    height:65px;
    font-size:18px;
    font-weight:bold;
    color:#fff!important;
    background-color:#008cd6;
    border:3px solid #fff;
    border-radius:100vh;
    box-shadow:0 0 0 2px #ccc;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    left:45.7%;
    z-index:3;
	}

.formingStep-titleBox{display:flex;}

.formingStepList li:nth-child(odd) .formingStep-titleBox{justify-content:flex-end;}

.formingStep-title{
	font-size:20px;
	font-weight:bold;
	line-height:1em;
	padding:12px 15px 10px;
	margin-left:30px;
	border:2px solid #008cd6;
	border-radius:10px;
	position:relative;
	}

.formingStepList li:nth-child(odd) .formingStep-title{margin-right:30px; margin-left:0;}

.formingStep-title::after,
.formingStep-title::before{
    content:"";
    height:0;
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    width:0;
	}

.formingStep-title::before{
    border-bottom:10px solid transparent;
    border-left:12px solid #008cd6;
    border-top:10px solid transparent;
    right:-12px;
    z-index:1;
	}

.formingStep-title::after{
    border-bottom:9px solid transparent;
    border-left:11px solid #fff;
    border-top:9px solid transparent;
    right:-9px;
    z-index:2;
	}

.formingStepList li:nth-child(even) .formingStep-title::before{
	border:10px solid transparent;
    border-right:12px solid #008cd6;
    border-left:none;
    left:-12px;
	}

.formingStepList li:nth-child(even) .formingStep-title::after{
	border:9px solid transparent;
    border-right:11px solid #fff;
    border-left:none;
    left:-9px;
	}

.formingStep-desc{padding:10px 30px;}

.formingStep-desc .box__inner{
	padding:15px 20px;
	border:1px solid #ccc;
	border-radius:10px;
	}

/* 分頁製程介紹_end */

/* 分頁最新消息_start */
.newsContentBlock{max-width:900px;}

.newsTypeMenuBox{
    flex-basis:250px;
    margin-right:20px;
    position:relative;
    display:none;
	}

ul.newsTypeMenu{
	padding-left:0;
	list-style:none;
	background-color:#DFF6FD;
	}

ul.newsTypeMenu li{
	border-bottom:1px solid #fff;
	}

ul.newsTypeMenu li:last-child{
	margin-bottom:0;
	padding-bottom:0;
	border-bottom:none;
	}

ul.newsTypeMenu li a{
	display:block;
	font-size:18px;
	color:#000;
	line-height:1.7em;
	padding:15px;
	position:relative;
    transition:all 0.5s ease 0s;
	}

ul.newsTypeMenu li a::before{
    content:"\f105";
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    color:#fff;
    position:absolute;
    top:15px;
    left:15px;
    opacity:0;
    transition:all 0.5s ease 0s;
	}

ul.newsTypeMenu li:hover a{padding-left:30px; color:#fff; background-color:#0f8a7c;}
ul.newsTypeMenu li:hover a::before{opacity:1;}

.page-news-list-content{display:flex;}

.news-list-menu{width:20%;}
.news-list-block{width:80%;}

.news-list-menu, .news-list-block{padding:10px;}

.news-list{padding-left:0; margin-top:10px;}

.news-list li{list-style:none; border-bottom:1px solid #dcdcdc;}

.news-list li a{
    display:block;
    font-size:18px;
    font-weight:600;
    padding:10px 0 10px 15px;
    position:relative;
    letter-spacing:1px;
	}

.news-list li a::before{
    width:0;
    height:0;
    border-style:solid;
    border-width:4px 0 4px 8px;
    border-color:transparent transparent transparent #686868;
    content:"";
    position:absolute;
    top:20px;
    left:0;
    transform-style:preserve-3d;
    transition:all 0.5s ease;
}

.news-list li a:hover{color:#0f8a7c;}

.news-list li a:hover::before {
    transform:rotateX(360deg);
    border-color:transparent transparent transparent #0f8a7c;
	}

.news-box{
	margin:0 auto 50px;
	background-color:#f7f7f7;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.3s;
	position:relative;
	}

.news-box:hover{
	box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.2);
	transition:box-shadow 0.3s;
	}

.news-box>.box-inner{
	margin:20px;
	display:flex;
	align-items:center;
	}

.news-pic{
	flex-basis:300px;
	padding:20px 0 0;
	margin-bottom:20px;
	}

.news-pic-inner{
	width:100%;
	height:0;
	padding-bottom:75%;
	overflow:hidden;
	text-align:center;
	position:relative;
	}

.news-pic a{display:block;}

.news-pic img{
	max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    height: 100%;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    position: absolute;
    transform: translate(-50% , 0) scale(1);
    transition: all 0.3s;
	}

.news-block{flex:1; padding:20px 10px;}

.news-title h3{padding:5px 0;}

.news-title h3 a{
	font-size:24px;
	font-weight:600;
	color:#344d2a;
	display:block;
	}

.news-title h3:hover a{color:#408391;}

.news-date{color:#808080; font-style:italic;}

.news-more-block{
    text-align:center;
    margin-top:15px;
    justify-content:flex-end;
	}

.more-btn-box{
    margin:0;
    border:1px solid #dcdcdc;
    border-radius:5px;
    background-color:#0f8a7c;
	}

.more-btn-box a{
	display:block;
	width:120px;
	color:#fff;
	padding:12px 25px;
	position:relative;
	transition:all 0.2s linear 0s;
	overflow:hidden;
	}

.more-btn-box a:before {
    content:"\f178";
    font-family:FontAwesome;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:0;
    left:0px;
    width:100%;
    height:100%;
    text-align:center;
    font-size:30px;
    transform:scale(0, 1);
    transition:all 0.2s linear 0s;
	}

.more-btn-box:hover{background-color:#408391;}

.more-btn-box a:hover{text-indent:-9999px;}

.more-btn-box a:hover:before{transform:scale(1,1); text-indent:0;}

.news-text{
	width:90%;
	margin:10px auto 20px;
	padding-left:20px;
	padding-right:20px;
	white-space:nowrap;
	overflow:hidden;
    text-overflow:ellipsis;
	}
	
.newsbtn{
	float:right;
	color:#fff;
    font-size:15px;
    margin-right:6%;
    display:inline-block;
    padding:4px 12px;
    margin-bottom:0;
    line-height:20px;
    text-align:center;
    vertical-align:middle;
    background-color:#5f605d;
    border:3px solid #5f605d;
    cursor:pointer;
	}
.newsbtn:hover{
	background-color:#266746;
    border:3px solid #266746;
    padding:4px 20px 4px 12px;
    transition:all 0.3s ease;
	}

.newsDetailContentBlock{max-width:900px;}

.news-detail-box{margin:0 auto 30px;}

.news-detail-cover-pic{width:90%; max-width:450px; margin:0 auto;}
.news-detail-cover-pic>.box-inner{margin:10px;}

.news-detail-cover-pic img{width:100%;}

.news-detail-infobox{min-height:350px; position:relative;}
.news-detail-infobox>.box-inner{margin:10px 20px;}

.newsDetailContentBlock .contentEditBlock{min-height:350px;}

.newsDetailTitle{
	padding-bottom:15px;
	margin-bottom:15px;
	border-bottom:1px solid rgba(52,77,42,0.25);
	}

.newsDetailTitle h3{font-size:26px; font-weight:600;}

.newsDetailContent table tr td:nth-child(1){width:100px;}
/* 分頁最新消息_end */

/* 分頁型錄下載_start */
.catalogList{margin:0!important; display:flex; flex-wrap:wrap;}

.catalogList li{
	width:33.333%;
	padding:15px;
	margin-bottom:30px!important;
	position:relative;
	}

.catalogCoverBox .img-cover{padding-bottom:150%; border:1px solid rgba(204,204,204,0.5);}

.catalogItemTxt{text-align:center; margin-top:10px;}

.catalogItemTxt h4{font-size:18px;}

/* 分頁型錄下載_end */

/*頁籤區_start*/
.numpage-btn{width:100%; text-align:center;}

.numpage-btn .pagination{
	margin:20px 0;
    display:inline-flex;
    border-radius:0;
    padding-left:0;
    list-style:none;
	}

.pagination>li{display:inline;}

.numpage-btn .pagination li{padding:5px 10px;}
.numpage-btn .pagination li.active{
    color:#fff;
	}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #787878;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover{
    color:#fff;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover{
	background-color:#60b5ff;
	border-color:inherit;
	}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover{
	color:#fff;
	background-color:#008cd6;
	}

.pagination>li:hover i{color:#fff;}
/*頁籤區_end*/

/*product*/
.detailContentArea{
	background: linear-gradient(to bottom,#fff,#cae9fc,#a2d9f6);
    background: -moz-linear-gradient(to bottom,#fff,#cae9fc,#a2d9f6);
    background: -o-linear-gradient(to bottom,#fff,#cae9fc,#a2d9f6);
    background: -webkit-linear-gradient(to bottom,#fff,#cae9fc,#a2d9f6);
	/*background-color:rgba(125,180,235,0.25);*/
	}

.productBlock{max-width:1480px;}

.product-type-block{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	}

.productTypeMenu{
	flex-basis:250px;
	position:relative;
	}

.productTypeMenuBox{padding:15px;}

.productTypeList{padding-left:0; list-style:none;}

.detailDropTitle{
    padding:15px;
    font-size:15px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.35);
    background-color:#004986;
	}

.detailDropMenuList, .detailDropMenuList>li>ul{list-style:none; padding-left:0;}

.detailDropMenuList li a{
	display:block;
	font-size:15px;
	padding:15px;
	}

.detailDropMenuList>li{border-bottom:1px solid rgba(70,141,163,0.35);}
.detailDropMenuList>li:last-child{border-bottom:none;}

.detailDropMenuList>li>a{
	color:#fff;
	background-color:#008cd6;
	position:relative;
	}

.detialDropBtn2nd{
	width:45px;
	height:45px;
	position:absolute;
	top:0;
	right:0;
	transition:all 0.3s ease;
	}

li.has-mobileDrop>a>span::before{
    content:"";
    display:block;
    width:12px;
    height:0px;
    border-bottom:solid 3px #fff;
    position:absolute;
    top:45%;
    right:15px;
    transform:rotate(90deg);
	transition:all 0.2s ease;
	}

li.has-mobileDrop>a>span::after{
    content:"";
    display:block;
    width:12px;
    height:0px;
    border-bottom:solid 3px #fff;
    position:absolute;
    top:45%;
    right:15px;
	transition:all 0.2s ease;
	}

.detailDropMenuList2nd{display:none;}

li.has-mobileDrop.is-open .detailDropMenuList2nd{
	display:block;
	overflow-x:hidden;
    overflow-y:scroll;
    max-height:500px
	}

li.has-mobileDrop.is-open>a>span::before{
	-webkit-transform:rotate(135deg);
    -ms-transform:rotate(135deg);
    -o-transform:rotate(135deg);
    transform:rotate(135deg);
	}

li.has-mobileDrop.is-open>a>span::after{
	-webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
	}

.detailDropMenuList2nd li{border-bottom:1px solid rgba(205,205,205,0.35);}
.detailDropMenuList2nd li:last-child{border-bottom:none;}

.detailDropMenuList2nd li a{padding:15px 20px;}

.detailDropMenuList2nd li i{margin-right:3px;}

.detailDropBtn:hover{background-color:#004c78;}
.detailDropMenuList>li:hover>a{color:#fff; background-color:#004c78;}

.product-block{
	flex:1;
	display:flex;
	flex-wrap:wrap;
	padding:15px;
	position:relative;
	}

.product_box{
	width:25%;
	margin-bottom:30px;
	box-sizing:border-box;
	position:relative;
	}

.product_box>.box-inner{margin:10px;}

.product-block-detail{
	flex:100%;
	padding:15px;
	}

.product_img{
	display:block;
    height:0;
    text-align:center;
    padding-bottom:75%;
    overflow:hidden;
    position:relative;
	background-color:#3777a4;
	}

.product_img a{
  	box-sizing:border-box;
	transition:all 0.4s ease;
    text-align:center;
    transition:all .3s ease-in-out;
	}

.product_img img{
	max-width:100%;
    min-width:100%;
    object-fit:cover;
    height:100%;
    -moz-object-fit:cover;
    -ms-object-fit:cover;
    -o-object-fit:cover;
    -webkit-object-fit:cover;
    position:absolute;
    transform:translate(-50% , 0) scale(1);
    transition:all 0.3s;
	}

.product_text{text-align:center;}

.product_text h4{
	font-size:18px;
	font-weight:500;
	color:#18306a;
	padding:7px 25px 5px;
	margin-bottom:0;
	border:1px solid rgba(0,140,214,0.35);
	border-radius:999em;
	transition:all 0.5s ease 0s;
	display:inline-block;
	}

.product_box:hover .product_text h4{
	color:#fff;
	background-color:#008cd6;
	border:1px solid rgba(0,140,214,1);
	}

.product_box:hover .product_img img{
	opacity:0.2;
	transform:translate(-50%, 0) scale(1.1);
	}

.product_box:hover .product_img a::after{opacity:1; margin-top:0px;}

.productDeailCover{width:100%; max-width:500px; margin:0 auto;}

.productDeailTitle h3{
	color:#5f605d;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	}

.productDeailContent{min-height:500px; position:relative; z-index:5;}

.productDeailContent p, .productDeailContent ul li{
	font-size:18px;
	line-height:1.7em;
	}

.p_page{
	text-align:center;
	margin:10px auto;
	width: 200px;
}
.p_page a{
	color:#595757;
	font-size:18px;
	text-decoration:none;
}

.cornerDecorate{position:absolute; z-index:1;}

.bottom_left{
    left:0;
    bottom:-2px;
    width:840px;
    height:576px;
    background:url(../images/bg-corner-bottom_left.png) no-repeat;
	}

/*產品內頁縮圖*/

/*流程介紹_start*/
.processList{
	padding-top:60px;
	padding-left:0;
	list-style:none;
	}

.processList li{
	margin-bottom:80px!important;
	padding:0 60px 10px;
	background-color:#e8f9ff;
	-webkit-box-shadow:0px 0px 16px 0px rgba(0, 0, 0, 0.25);
    box-shadow:0px 0px 16px 0px rgba(0, 0, 0, 0.25);
	-webkit-transition:0.4s;
    transition:0.4s;
	position:relative;
	}

.processList li:last-child{margin-bottom:0;}

.processListItem__in{
	display:flex;
	-webkit-justify-content:space-between;
    -ms-flex-pack: justify;
    justify-content:space-between;
	}

.processList li:nth-child(even) .processListItem__in{
	flex-direction:row-reverse;
	}

.processListCover{flex-basis:450px; margin-right:20px;}
.processListInfo{flex:1; padding-top:60px;}

.processList li:nth-child(even) .processListCover{
	margin-right:0;
	margin-left:20px;
	}

.processListCover{
	top:-40px;
	position:relative;
	-webkit-transition:0.4s;
    transition:0.4s;
	}

.processListCover .img-cover{padding-bottom:65%;}

.processListTitle{
	font-size:26px;
	font-weight:bold;
	margin-bottom:20px;
	}

.processNarrative p{
    display:-webkit-box;
    width:100%;
    height:4.8em;
    line-height:1.6em;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:16px;
    margin:0;
	}

.processMoreBtn{margin-top:30px;}

.processSubtitleBox{
	-webkit-writing-mode:vertical-rl;
    -ms-writing-mode:tb-rl;
    writing-mode:vertical-rl;
	position:absolute;
	top:-40px;
	left:15px;
	}

.processList li:nth-child(even) .processSubtitleBox{
	left:unset;
	right:15px;
	}

.processSubtitle{position:relative;}

.processSubtitle::before{
	content:"";
    display:block;
    position:absolute;
    height:80px;
    width:1px;
    background:#a6a6a6;
    top:0;
    left:50%;
    -webkit-transition:height .4s,top .4s;
    transition:height .4s,top .4s;
	}

.processSubtitle span{
	font-family:'Noto Serif', serif;
	text-transform:uppercase;
	color:#a6a6a6;
	font-size:12px;
    font-weight:700;
    letter-spacing:0.05em;
	padding-top:90px;
	-webkit-transition: 0.4s;
    transition: 0.4s;
	}

.processList li:hover{
	-webkit-box-shadow:0px 0px 21px 0px rgba(0, 0, 0, 0.4);
    box-shadow:0px 0px 21px 0px rgba(0, 0, 0, 0.4);
	}

.processList li:hover .processSubtitle::before{height:125px;}
.processList li:hover .processSubtitle span{padding-top:135px;}
.processList li:hover .processListCover{top:10px;}

.formingList{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	}

.formingList li{
	width:49.5%;
	margin-bottom:30px!important;
	position:relative;
	}

.formingList li .box__inner{
	font-size:20px;
	font-weight:bold;
	letter-spacing:1px;
	text-align:center;
	padding:30px;
	border:6px solid rgba(0,140,214,0.5);
	}

.formingList li:hover .box__inner{
	color:#fff;
	text-shadow:1px 1px 2px #000;
	background-color:rgba(0,140,214,0.5);
	border:6px solid #008cd6;
	}

/*流程介紹_end*/

/*流程步驟圖_start*/
.flowStepArea-inner{padding-left:30px;}

.flowStepBlock{
	width:100%;
	border-left:2px dotted #ccc;
	}

.flowStepBox{
	margin-bottom:30px;
	display:flex;
	justify-content:right;
	align-items:center;
	position:relative;
	}

.flowStepBox:last-child{margin-bottom:0;}

.flowStepBox::before{
	content:"";
    transform:translateY(-43%);
    background-color:#008cd6;
    border:solid 3px #fff;
    width:18px;
    height:18px;
    box-shadow:0 0 0 2px #ccc;
    border-radius:100vh;
    position:absolute;
    top:43%;
    left:-10px;
    z-index:2;
	}

.flowStepBox:nth-child(1)::after{
	content:"";
    width:26px;
    height:43%;
    background-color:#fff;
    position:absolute;
    top:0;
    left:-14px;
    z-index:1;
	}

.flowStepInfo{width:45%;}
.flowStepPic{width:50%;}

.flowStepInfo{
	padding-right:50px;
	display:flex;
	flex-direction:column;
	}

.flowStepTitle{
	padding-bottom:10px;
	border-bottom:1px solid rgba(64,131,145,0.5);
	display:flex;
	align-items:flex-end;
	}

p.flowStepNum{
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
    color:#008cd6;
	text-align:center;
	line-height:1em;
	display:flex;
	flex-direction:column;
	}

p.flowStepNum span{
	font-size:24px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
    color:#008cd6;
	line-height:1em;
	}

.flowStepTitle h3{
	font-size:26px;
	font-weight:bold;
	padding-left:20px;
	}

p.flowStepNarrative{
	font-size:18px;
	font-weight:500;
	line-height:1.5em;
	margin-top:10px;
	}

.flowStepPic>.img-cover{padding-bottom:60%;}

.flowGoal{
	width:65px;
	height:65px;
	color:#fff;
	background-color:#008cd6;
    border:solid 3px #fff;
    border-radius:100vh;
    box-shadow:0 0 0 2px #ccc;
	display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
	}

.flowGoal p{
	font-size:18px;
	font-weight:bold;
	color:#fff;
	}

/*流程步驟圖_end*/


/*contact*/
.contactBlock{width:90%; max-width:1200px; margin:0 auto;}

.contactFormArea{
	padding:50px 0;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	}

.contactFormContainer{flex:100%; max-width:800px;}

.contactInfoBlock{
	flex-basis:100%;
	margin-top:30px;
	display:flex;
    justify-content:space-between;
    align-items:flex-end;
	}

.factoryBlock{width:49%;}

.remark{
	margin-bottom:25px;
	padding-bottom:15px;
	border-bottom:1px solid #ddd;
	}

.remark p{
	font-size:16px;
	font-weight:bold;
	line-height:1.5em;
	}

.remark span{
	margin-right:5px;
    font-size:18px;
    color:#ea0000;
    vertical-align:bottom;
	}

.contactFormBlock{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	}

.contactFormBox{width:48.5%;}

.contactInfoBox{
	margin-bottom:20px;
	padding:15px 20px;
	border:1px solid #ddd;
	border-radius:10px;
	position:relative;
	}

.contactInfoTitle{
	font-size:22px;
	font-weight:bold;
	margin-bottom:10px;
	}

.footInfoSubTitle{
	font-size:14px;
	color:#686868;
	padding:3px 15px;
	margin-bottom:5px;
	border:1px solid #686868;
	border-radius:999em;
	display:inline-block;
	}

.contactInfoList{padding-left:0; list-style:none;}

.contactInfoList li a{
	display:inline-block;
	font-size:16px;
	color:#333;
	line-height:1.7em;
	}

.contactInfoList li i{margin:0 5px;}

.contactInfoList li:hover a{color:#008cd6;}

.mapBox{position:relative;}

.mapBox iframe{
	width:100%;
	height:350px;
	border:1px solid rgba(134,134,134,0.35);
	}

.send-btn-block{
	display:block;
	width:100%;
	text-align:center;
	}

.send-btn-block button{
	width:200px;
    margin:20px auto 0;
    padding:15px 15px;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    background-color:#008cd6;
    border:1px solid #008cd6;
    border-radius:5px;
	}

.send-btn-block button:hover{
	background-color:#27548a;
    border:1px solid #27548a;
	}

/* inquiry_start */
.inquiryArea{
	padding:60px 0 80px;
	background:-webkit-linear-gradient(#a1d8e6,#a1d8e6,#dcf2f1);
    background:-o-linear-gradient(#a1d8e6,#a1d8e6,#dcf2f1);
    background:-moz-linear-gradient(#a1d8e6,#a1d8e6,#dcf2f1);
    background:linear-gradient(#a1d8e6,#a1d8e6,#dcf2f1);
	}

.inquiryBlock{width:90%; max-width:1000px; margin:0 auto;}

.inquiryTitleBox{
	max-width:700px;
	margin-bottom:30px;
	padding:20px;
	border:1px solid #000;
	position:relative;
	}

.inquiryTitle{
	padding:0 0 10px;
	background-color:#a1d8e6;
	position:absolute;
	top:-40px;
	left:30px;
	}

.inquiryTitle h3.inquiryTitle-main{
	display:inline-block;
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
    padding:0 15px 5px;
    position:relative;
    z-index:10;
	}

.inquiryTitle h3.inquiryTitle-main span{
	font-size:56px;
    font-family:'Oswald', sans-serif;
    font-weight:bold;
    color:#0f8a7c;
	}

.inquiryTitle h3.inquiryTitle-sub{
	font-size:22px;
    font-weight:bold;
    margin-top:10px;
    padding-left:20px;
    position:relative;
	}

.inquiryTitleBox p{padding-left:200px;}

.inquiryTable{
    width:100%;
    margin:10px auto 30px;
    border:1px solid #585858;
    text-align:center!important;
    background-color:#fff;
	}

::placeholder{font-size:14px; color:#ccc;}

.inquiryTable th, .inquiryTable td{padding:15px;}

.inquiryTable th{border:1px solid #e1e1e1;}

.th-head-ss{
    background-color:#0f8a7c!important;
	}

.th-head-ss th, .th-head-ss sup{color:#fff; font-weight:400;}

.inquiryTable td a{font-size:14px; color:#000;}

.inquiryTable td a img{
    width:120px;
    vertical-align:middle;
    margin-right:15px;
	}

.inquiryTable td input[type="text"]{
    height:25px;
    line-height:20px;
    border:1px solid #d6d6d6;
    text-align:center;
    outline:none;
	}

.inquiryFormBlock{
	padding:10px 15px 20px;
	background-color:#fff;
	display:flex;
	flex-wrap:wrap;
	}

.inquiryFormBlock input[type="text"]{
    width:100%;
    height:35px;
    line-height:35px;
	}

.inquiryFormBlock input[type="radio"]{
    margin:0px 3px 0px 0;
	}

.inquiryFormBlock textarea{display:block; width:100%; height:180px;}

.inquiryFormBlock .inputStyle,
.inquiryFormBlock select,
.inquiryFormBlock textarea{
	padding:6px;
    border:none;
    outline:none;
	}

.inquiryFormBlock label{
    display:inline-block;
    width:100%;
    font-size:14px;
    line-height:35px;
    letter-spacing:0;
    color:#2f2f2f;
	}

.inquiryFormBox{
	width:50%;
	display:flex;
	padding:20px 0px 15px;
	position:relative;
	}

.inquiryFormBox::before{
    content:"";
    width:100%;
    height:1px;
    background-color:#dcdcdc;
    display:block;
    position:absolute;
    bottom:0;
    left:0;
	}

.inquiryFormBox:nth-child(odd){padding-right:10px;}
.inquiryFormBox:nth-child(even){padding-left:10px;}

.inquiryFormBox:nth-of-type(odd)::before{width:calc(100% - 10px);}

.inquiryFormBox:nth-of-type(even)::before{
    width:calc(100% - 10px);
    left:auto;
    right:0;
	}

.inquiryFormBox .left{
    flex-shrink:1;
    width:130px;
    position:relative;
	}

.inquiryFormBox .left::before{
    content:"";
    width:1px;
    height:14px;
    display:block;
    background-color:#cbcbcb;
    position:absolute;
    top:10px;
    right:0;
	}

.inquiryFormBox .right{
    width:calc(100% - 90px);
    flex-shrink:0;
    padding-left:25px;
	}

.inquiryFormBox .left>label{position:relative;}

.inquiryFormBox .left>label.required::before{
	content:"※";
    color:#ea0000;
    display:inline-block;
    vertical-align:middle;
    line-height:1;
    margin:0px 4px 4px 0px
	}

.inquiryFormBlock > div.name .right{display:flex; align-items:center;}
.inquiryFormBlock > div.name .right input.inputStyle{width:50%;}
.inquiryFormBlock > div.name .right .sexLabel{width:auto; padding:0px 7px 0;}

/* inquiry_end */

/*螢幕大小*/
@media screen and (min-width:1400px){
	.mainSpiritSection .mainSpirit__in{height:650px;}
	}

@media screen and (max-width:1400px){
	.product_box{width:33.333%;}
	}

@media screen and (max-width:1200px){
	header{height:auto; position:inherit; padding-top:1px;}
	header.is-fixed{position:absolute;}
	.is-fixed .mainLogoBox{width:250px;}
	.pageBannerBlock{margin-top:0;}
	nav{width:100%;}
	.menuBtnBox{display:block;}
	.topLinkBlock{display:none;}
	.topMenuBlock-bottom{display:none;}
	.navMenu-bottom{padding-bottom:20px; margin:20px auto 0;}
	.date{padding:0 0 0 40px; width:130px;}
	}

@media screen and (min-width:1200px){
	#mobile{display:none;visibility:hidden;}
	}

@media screen and (max-width:1080px){
	.page-edit-area{padding:0;}
	nav>ul{display:none;padding-right:60px;}
	#banner{padding-top:0;}
	.date{padding:0 0 0 30px; width:100px;}
	.Lang{position:initial;}
	.product-block-detail{width:78%;}
	.footbox{width:90%;}
	.foot-infoblock{width:60%;}
	.foot-service-block{width:80%;}
	.tableDown span ul{margin-left:0px;}
	.pmargin-contact{flex-direction:column-reverse;}
	.info-block{width:100%; border-bottom-right-radius:30px; border-top-left-radius:0px;}
	.info{text-align:start; padding:40px; margin:0px auto;}
	.info-en{text-align:start; padding:60px; margin:0px auto;}
	.contact_margin iframe{width:100%; height:300px;}
	.footbox{max-width:700px; justify-content:center;}
	.more-btn-box{margin:0;}
	.more-btn-box a{width:90px;}
	.page-eidt-area{padding-top:0;}
	.process-step-block{max-width:800px; margin:0 auto;}
	.process-step-box{width:50%;}
	.guide-block{display:none;}
	.foot-block{max-width:600px;}
	.foot-box{width:100%;}
	.foot-box.foot-box-contact{width:60%;}
	.foot-box.foot-box-project{width:40%;}
	.contactFormArea{width:100%; max-width:700px; margin:0 auto;}
	.contactFormContainer{flex:100%;}
	.contactInfoBlock{flex-wrap:wrap;}
	.factoryBlock{width:100%; margin-bottom:20px;}
	.carbonList li{width:33.333%;}
	}

@media screen and (max-width:980px){
	.hot-block{width:90%; max-width:720px; margin:0 auto;}
	.hot-box{width:50%; margin:0 auto 30px;}
	.more{margin:10px 0 20px 0;}
	.formBox .form input[type="text"]{ width:75%;}
	.formBox .form textarea{width:75%;}
	.titleIcon{width:35px;}
	.tableDown span{padding-left:0px;}
	.tableDown span ul{padding-left:0px;}
	.product-block-detail{width:75%;}
	.map-infobox{width:70%; margin:0 auto;}
	.map-box{width:100%;}
	.newsBlock{flex-wrap:wrap;}
	.newsTypeMenuBox{flex-basis:100%;}
	.newsListContent{margin-top:20px;}
	.news-detail-cover-pic{width:100%; max-width:400px; margin:0 auto;}
	.news-detail-infobox{width:100%; max-width:600px; margin:30px auto 0;}
	.page-news-list-content{flex-wrap:wrap;}
	.news-list-menu{width:90%; max-width:600px; margin:0 auto;}
	.news-list-block{width:100%;}
	.news-list li{border-bottom:none; display:inline-block;}
	.news-list li{margin-left:10px; margin-right:15px;}
	.product_box{width:50%;}
	.flowStepArea{max-width:600px; margin:0 auto;}
	.flowStepBox{flex-wrap:wrap;}
	.flowStepBox::before{top:8%;}
	.flowStepBox:nth-child(1)::after{height:6%;}
	.flowStepInfo, .flowStepPic{width:95%;}
	.indexAboutPic{flex-basis:450px;}
	.indexAboutPic>.img-cover{padding-bottom:80%;}
	.pageSpiritBlock{max-width:600px;}
	.pageSpiritBlock-row{flex-wrap:wrap; justify-content:center;}
	.pageSpiritListBlock{flex:100%; margin-top:20px;}
	.footBlock-bottom{flex-wrap:wrap;}
	.footBox-siteMap{flex-basis:100%;}
	.footBox-policy{flex:100%; align-items:flex-start;}
	.policyList li{margin:10px 0;}
	}

@media screen and (max-width:840px){
	#navlist{display:none;}
	#contentBox{overflow:inherit;}
	#keyBg{background-color: #3d3d3d;}
	#navlist_mobile{display:block;}
	.key{width:516px; line-height:35px;}
	.key a{color:#bfbfbf;}
	.key a:hover{color:#ffffff;}
	.date{padding:0 0 0 10px;}
	.news{width:75%;}
	.hot{width:100%}
	.productdt_margin{width:95%;}
	.showbox{float:none; margin:0 auto; width:600px;}
	.photoimg{width:100%;}
	.ptext{width:100%; float:none; margin-left:0;}
	footer{margin-top:0px;}
	#footlogo {padding-bottom:0px;}
	.about form{position:initial; margin:0 0 45px;}
	.product-menu{flex-basis:100%;}
	.product-menu>ul>li{display:inline-block; border-bottom:none;}
	.product-menu ul li a{padding:10px 15px 10px 20px;}
	.product-block{width:100%; border-left:0;}
	.product-block-detail{width:90%; border-left:0; float:none; margin:0 auto;}
	.product_img a{margin-bottom:10px;}
	.tableCenter2 ul li{padding-left:10px;}
	.process-block{max-width:600px; margin:0 auto;}
	.process-box{width:50%;}
	.indexAboutPic{flex-basis:350px;}
	.indexAboutPic>.img-cover{padding-bottom:110%;}
	.newsBlock{flex-wrap:wrap;}
	.newsBlock .blockTitleBox{flex-basis:100%;}
	.newsListContent{margin-top:20px;}
	.processListCover{flex-basis:350px;}
	.productTypeMenu{display:none;}
	.inquiryFormBox{width:100%;}
	.inquiryFormBox:nth-child(odd){padding:20px 10px 15px;}
	.inquiryFormBox:nth-child(even){padding:20px 10px 15px;}
	.inquiryFormBox:nth-of-type(odd)::before{width:calc(100% - 20px); left:10px;}
	.inquiryFormBox:nth-of-type(even)::before{width:calc(100% - 20px); left:10px; right:auto;}
	.pageAboutBlock-txt{flex:100%;}
	.pageAboutBlock-pic{flex-basis:100%; max-width:600px; margin-top:20px;}
	.carbonList li{width:50%;}
	.catalogList li{width:50%;}
	}

@media only screen and (max-width:830px){
	#conference-timeline .conference-center-line{height:88%;}
	#conference-timeline .conference-center-line{margin-left:0; left:64px;}
	.conference-timeline-box{margin:20px 0 30px;}
	.conference-timeline-box .step-box{margin-left:0; left:20px;}
	.conference-timeline-box .timeline-box-left{max-width:100%; width:auto; float:none;}
	.conference-timeline-box .timeline-box-left{margin-left:50px; min-height:53px;}
	.conference-timeline-box .timeline-box-left{margin-bottom:10px;}
	.conference-timeline-box .timeline-box-right{max-width:100%; width:auto; float:none;}
	.conference-timeline-box .timeline-box-right{margin-left:50px; min-height:53px;}
	.conference-timeline-box .timeline-box-right{padding-top:0;}
	.conference-timeline-box .content-left{margin-left:50px;}
	.conference-timeline-box .content-left{padding:10px 25px; max-width:350px;}
	.conference-timeline-box .content-right{padding:0 35px 20px; min-height:65px;}
}

@media screen and (max-width:768px){
	.banner-L{display:none;}
	.banner-S{display:block;}
	.hot1{width:320px; height:300px;}
	.table1Box{display: block;}
	#index_margin{width:680px;}
	.contact_margin{width:600px;}
	.contact_margin p{font-size:1em; width:80%;}
	.formBox .form input[type="text"]{width:70%;}
	.formBox .form textarea{width:70%;}
	.table1{display:block; text-align:center;}
	.tableLeft{width:100%;}
	.tableCenter1{width:100%;}
	.tableCenter2{width:100%;}
	.tableRight{width:100%;}
	.tableTop{padding-left:0;}
	.tableDown span{padding-left:0;}
	.inquiryType{text-align:left; margin-bottom:5px;}
	.tableDown{height:auto; margin:15px 0;}
	.tableLeft .tableDown{margin:0px 0;}
	.tableCenter2 ul li{padding-left:15px;}
	.tableDown span ul{margin-left:45px;}
	.contact-form-box{width:100%;}
	.contact-form-box#hide-item{display:none;}
	.process-step-block{max-width:400px;}
	.process-step-box{width:100%;}
	.process-step-box>.box-inner{padding:20px 0 50px;}
	.process-step-box:before{border-color:#96c896 transparent transparent transparent;}
	.process-step-box:before{right:45%; top:unset; bottom:0;}
	.news-box{max-width:360px;}
	.news-box>.box-inner{flex-wrap:wrap; margin:15px;}
	.news-pic{flex-basis:100%;}
	.news-block{padding:10px 5px 20px;}
	.mainSpirit__block h3{font-size:32px;}
	.mainSpirit__block p{font-size:22px;}
	.indexProductBlock{flex-wrap:wrap;}
	.productSection .blockTitleBox{margin-right:0; margin-left:30px;}
	.indexProductContent{flex:100%; margin-top:30px;}
	.processList li{padding:0 30px 10px 60px;}
	.processListItem__in{flex-wrap:wrap;}
	.processListCover{flex-basis:100%; margin-right:0; top:10px;}
	.processListInfo{padding-top:0; margin-bottom:30px;}
	.processSubtitleBox{top:20px;}
	.processList li:nth-child(even) .processSubtitleBox{left:15px; right:unset;}
	.processList li:nth-child(even) .processListCover{margin-left:0;}
	.footBlock{flex-wrap:wrap; padding:15px 0 0;}
	.footBlock-top{flex-direction:row;}
	.footBox-logo{margin-bottom:10px;}
	.footBox-policy{width:100%;}
	.policyList{justify-content:center;}
	.policyList li{padding:10px 0;}
	.product_box{width:50%;}
	.inquiryTable td a img{width:80px;}
	.footIconList{margin-bottom:0; justify-content:center;}
	.bannerTitle{bottom:50%;}
	#banner .swiper-button-prev, #banner .swiper-container-rtl .swiper-button-next{
		top:70%;
	}
	#banner .swiper-button-next, #banner .swiper-container-rtl .swiper-button-prev{
		top:70%;
	}
	.artcileImg img{width:50%;}
	.pageTabList{justify-content:space-between;}
	.pageTabList li{width:32.5%; margin-right:0; text-align:center;}
	.pageTabList li:nth-child(1){width:49.5%;}
	.pageTabList li:nth-child(2){width:49.5%;}
	.pageTabList li .box__inner{padding:15px 0;}
	.spiritMainCoverBlock{flex-basis:100%; max-width:400px; margin-right:0;}
	.spiritMainCoverBlock::before{width:400px; height:400px;}
	.spiritMainCoverBlock .centerBox{height:400px;}
	.product_text h4{font-size:16px;}
	.contactFormBox{width:100%;}
	.newsList li{padding:0 0 20px 0;}
	.newsList li a{flex-wrap:wrap;}
	.newsItemCover{flex-basis:100%; max-width:400px; margin-right:0;}
	.newsItemContent{flex:100%; margin-top:15px;}
	}

@media screen and (max-width: 640px){
	.hot-block{max-width:400px;}
	.hot-box{width:80%; margin:0 auto 30px;}
	.news{width:70%; padding:0 0 0 10px;}
	.pic{width:initial; float:none; height:80%;}
	.key{width:100%;}
	.hot_text{ height:initial; float:none; padding:10px;}
	.hot_box{margin:0 auto;width:100%;}
	.news_t{float:none;}
	.contact_margin iframe{width:100%; height:300px;}
	.contact_margin{width:450px;}
	.contact_margin p{width:100%;}
	.product_box{width:50%;}
	.product_margin{width:440px;}
	.showbox{float:none; margin:0 auto; width:500px; height:385px;}
	.footbox{width:80%;}
	.popup-gallery{width:100%;}
	.formBox .form input[type="text"]{width:58%;}
	.formBox .form textarea{width:58%;}
	.download-pro h3{position:absolute; right:0; top:12px;}
	.download-pro h4{display:block; margin-left:0; margin-bottom:8px;}
	.download-pro {margin:25px auto 45px; position:relative;}
	.product_img a{width:100%; height:100%;}
	.product_img a::after{width:60px; padding-top:60px;}
	.map-infobox{width:100%;}
	.foot-block{width:95%;}
	.foot-box.foot-box-contact{width:unset;}
	.foot-box.foot-box-project{width:unset;}
	.process-box{width:100%;}
	.indexAboutPic{flex-basis:250px;}
	.indexAboutPic>.img-cover{padding-bottom:130%;}
	.indexAboutPic::after{right:-530px;}
	.indexAboutContent{padding:20px 20px 20px 0;}
	.inquiryTitleBox p{padding-top:60px; padding-left:0;}
	.bannerTitle-main{font-size:40px;}
	.bannerTitle-sub{font-size:32px;}
	.formingList li{width:100%;}
	.formingStepListBlock::before{left:31px;}
	.formingStepListBlock::after{width:34px;}
	.formingStepList{padding-left:32px;}
	.formingStepList li{width:100%;}
	.formingStepList li:nth-child(even){left:2px;}
	.formingStepList li:nth-child(odd) .formingStep-titleBox{justify-content:flex-start;}
	.formingStepList li:nth-child(odd) .formingStep-title{margin-right:0; margin-left:30px;}
	.formingStepList li:nth-child(odd)::before{right:unset; left:-8px;}
	.formingStepList li:nth-child(odd) .formingStep-title::before{border:10px solid transparent; border-right:12px solid #008cd6; border-left:none; left:-12px;}
	.formingStepList li:nth-child(odd) .formingStep-title::after{border:9px solid transparent; border-right:11px solid #fff; border-left:none; left:-9px;}
	.formingStepGoal{left:0;}
	}

@media screen and (max-width: 500px){
	.indexAboutBlock{flex-wrap:wrap;}
	.indexAboutPic{flex-basis:100%;}
	.indexAboutPic>.img-cover{padding-bottom:60%;}
	.indexAboutContent{padding:20px;}
	.product_box{width:100%;}
	.form-group{width:100%;}
	.inquiryTable td a img{display:block; width:100px; margin:0 auto 10px 0;}
	.inquiryFormBox{flex-wrap:wrap;}
	.inquiryFormBox:nth-child(odd){padding:20px 10px 5px;}
	.inquiryFormBox:nth-child(even){padding:20px 10px 5px;}
	.inquiryFormBox .right{width:100%; margin-top:10px; padding-left:0;}
	.inquiryFormBlock > div.name .right input.inputStyle{width:60%;}
	.inquiryFormBox .left::before{width:100%; height:1px; background-color:#efefef;}
	.inquiryFormBox .left::before{top:unset; right:unset; bottom:3px;}
	.carbonList li{width:100%;}
	}

@media screen and (max-width:480px){
	.pmargin .newtable1{max-width:300px;}
	.news{width:90%;}
	.news-text{padding:0;}
	.contact_margin iframe{width:380px; height:300px; padding-bottom:5px;}
	.contact_margin{width:380px;}
	.product_box{width:100%;}
	.product_margin{width:390px;}
	.showbox{float:none; margin:0 auto; width:400px; height:287px;}
	.detailBtn1{float:initial; margin:20px 0 10px;}
	.detailBtn2{float:initial; margin:20px 0 10px;}
	.download-pro h1{display:block;}
	.formBox .form label{position:initial;}
	.formBox .form input[type="text"]{padding-left: 10px; margin-left: 0px; width:100%;}
	.formBox .form textarea{padding-left:10px; margin-left:0px; width:100%;}
	.product_img a::after{display:none;}
	.pageBannerBox h3.pageBannerTitle-main::after{right:-26px;}
	.artcileImg img{width:100%;}
	.spiritMainCoverBlock{max-width:320px;}
	.spiritMainCoverBlock::before{width:320px; height:320px;}
	.spiritMainCoverBlock .centerBox{height:320px;}
	.circle-logo{width:100px;}
	.circleTitle-tw{font-size:22px;}
	.circleTitle-en{font-size:28px;}
	}

@media screen and (max-width: 400px){
	#footlogo{width:100%; margin-top:0;}
	.contact_margin iframe{width:100%; height:300px; padding-bottom:5px;}
	.contact_margin{width:320px;}
	.showbox{float:none; margin:0 auto; width:320px; height:245px;}
	.product_margin{width:80%;}
	.product_img{width:100%;}
	.contact_margin p{font-size:.9em;}
	.download-pro{position:initial; padding-bottom:15px;}
	.download-pro h3{position:initial; right:auto; float:none;}
	.download-pro h4{margin-bottom:18px;}
	.product_img a::after{width:80px; padding-top:80px;}
	.tableDown span ul{margin-left:15px;}
	.mainInfo-top .footInfoList li a{font-size:20px;}
	}