/* common */
*{margin:0;padding:0}
body{position:relative;margin:0;font-size:14px;background:#ffffff}
div,h1,h2,h3,h4,h5,h6,hr,p,form,label,input,textarea,img,span,ul,li,a{text-align:left;vertical-align:middle;margin:0;padding:0;word-wrap:normal;word-break:normal;line-height:170%;border-width:0;font-size:16px;font-family:"微軟正黑體","蘋果儷中黑","Lucida Grande","Arial","Arial Narrow";-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;transition:all 0.5s ease}
hr{border-top:1px #000 solid;margin:0 0 10px 0}
th{font-weight:normal}
ul,ol{list-style:none}
p.lineHeight{line-height:170%}
p.marginTop{margin:10px 0}
p.marginLeft{margin:0 10px}
fieldset{border:0}
input,button,select,textarea{outline:none}
img{max-width:100%}

/* anchor */
a:link,a:visited{font-weight:normal;text-decoration:none}
a:hover{text-decoration:none}

/* clear,clearfix */
.clear{clear:both}
.clearfix{display:inline-block}
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;font-size:0;content:"."}

/* hides from IE-mac \*/
* html .clearfix{height:1%}
.clearfix{display:block}

/* end hide from IE-mac */
livedemo00.template-help.com/media="screen":after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.wow{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1.5s;animation-duration:1.5s}


/* body */
body::selection{background:#565656;color:#fff}
body::-webkit-scrollbar{width:8px}
body::-webkit-scrollbar-track{background:#d4d4d4}
body::-webkit-scrollbar-thumb{background:#8e8e8e;outline:1px solid #545454}
body::-webkit-scrollbar-thumb:hover{background:#505050}
section{overflow:hidden;margin:0 auto;width:80%}
.wrapper{width:100%;overflow:hidden}

/* photo */
a.photo{overflow:hidden;background-position:50% 50%;background-repeat:no-repeat;background-size:100% auto;display:block}
a.photo img{width:100%;max-width:inherit}

/* header */
header{position:fixed;padding:1em 5vw;width:100vw;display:flex;justify-content:space-between;align-items:center;left:0;top: 0;z-index:9999;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;background: rgba(0, 0, 0, 0.8);}
header #cis { position: relative; }
header .logo_box { width: 240px; }
header .menu_box{position:relative;margin-right:2em;width:1%;flex:1 1 auto}
header .menu_box .menu_list{display:flex;justify-content:flex-end;align-items:center;gap: 20px;}
header .menu_box .menu_list li p{width: 100%;}
header .menu_box .menu_list li a{font-weight:500;color: #fff;padding: 40px 0px;}
header .contact_btn a{padding:.5em 1em;background:linear-gradient(to right,rgba(117,77,218,1) 0%,rgba(205,152,231,1) 100%);border-radius:3em;display:flex;align-items:center;color:#fff}
header .contact_btn a svg{margin-left:.5em;width:13px;height:13px;fill:#fff}
header.scroll{padding:.5em 5vw;top: 0;}
header.scroll:before {position: absolute;width: 100%;height: 180px;background: url(/images/00/img_header_bg.png) no-repeat 50% 0 / auto 100%;content: "";pointer-events: none;top: -40px;left: 0;z-index: -1;opacity: 0.8;}
header.scroll .web_logo svg{width:250px}
header.scroll .web_logo svg use{fill:#fff}
header.scroll .web_logo svg .circle_a{fill:#040404}
header.scroll .menu_box .menu_list li a{color:#fff}
#nav_toggleInner{margin:0 0 0 auto;padding:0;width:3.58em;height:3.58em;background:none;border:1px #dadada solid;border-radius:50%;display:flex;justify-content:center;align-items:center}
#nav_toggleInner .nav_hamburger{position:relative;width:1.6em;height:8px;display:inline-block}
#nav_toggleInner .nav_hamburger span{position:absolute;width:100%;height:1px;background:#404040;top:3px;-webkit-transition:-webkit-transform 300ms cubic-bezier(0.13,0.095,0.2,0.915);transition:-webkit-transform 300ms cubic-bezier(0.13,0.095,0.2,0.915);transition:transform 300ms cubic-bezier(0.13,0.095,0.2,0.915);transition:transform 300ms cubic-bezier(0.13,0.095,0.2,0.915),-webkit-transform 300ms cubic-bezier(0.13,0.095,0.2,0.915)}
#nav_toggleInner .nav_hamburger span.line_top{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-transform-origin:center;transform-origin:center}
#nav_toggleInner .nav_hamburger span.line_bottom{-webkit-transform:translateY(4px);transform:translateY(4px);-webkit-transform-origin:center;transform-origin:center}
.menu-open #nav_toggleInner .nav_hamburger span.line_top{-webkit-transform:translateY(0) rotate(135deg);transform:translateY(0) rotate(135deg)}
.menu-open #nav_toggleInner .nav_hamburger span.line_mid{-webkit-transform:translateY(0) scaleX(0);transform:translateY(0) scaleX(0)}
.menu-open #nav_toggleInner .nav_hamburger span.line_bottom{-webkit-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg)}
header.scroll #nav_toggleInner .nav_hamburger span{background:#fff}

/* webmenu_mb */
#webmenu_mb { position: fixed; padding: 0 5vw; width: 85vw; height: 0; display: flex; justify-content: center; align-items: stretch; box-shadow: 0 0 20px rgb(51 51 51 / 30%); background: #fff; top: 0; right: 0; opacity: 0; z-index: 999; pointer-events: none; }
#webmenu_mb[data-type="2"] { padding: 60px 5vw; height: 80vh; pointer-events: auto; opacity: 1; }
#webmenu_mb .logo_box { position: absolute; top: 60px; left: 5vw; z-index: 1; }
#webmenu_mb ul {min-width: 400px;display: flex;flex-direction: column;justify-content: center;}
#webmenu_mb ul li a { position: relative; padding: 5px 10px; font-size: 18px; letter-spacing: .3rem; }
#webmenu_mb ul li a span { overflow: hidden; position: absolute; width: 0; height: 1px; background: #3d3d3d; display: block; top: calc((100% - 1px) / 2); left: calc(100% - 30px); }
#webmenu_mb ul li:hover a span { overflow: visible; width: 30px; }
#webmenu_mb ul li a span:before { position: absolute; top: -3.5px; right: -5px; content: ""; }

/* menubg */
#menubg { width: 100vw; height: 100vh; background: rgb(24 24 24 / 90%); top: 0; left: 0; pointer-events: none; z-index: 2; opacity: 0; }
#menubg[data-type="2"] { opacity: 1; pointer-events: auto; }
#wh-widget-send-button.wh-widget-right{bottom: 18px!important;}

/* gotop */
#gotop{position:fixed;right:20px;bottom:60px;z-index:9;background:rgba(255,255,255,0.7);color:#0084ff;font-size:14px;border:3px solid #0084ff;padding:10px 15px;border-radius:50px;display:block}
a#gotop:hover{opacity:0.8}

/* ufo bottom */
#work01{position:fixed;right:20px;bottom:360px;z-index:99999;padding:5px 10px;background:rgb(235,59,104);border:1px #ccc solid}
#work02{position:fixed;right:20px;bottom:260px;z-index:99999;padding:5px 10px;background:rgb(54,115,212);border:1px #ccc solid}
#work02 a{color:white;width:auto;webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;font-size:16px;letter-spacing:0.15em}
#work01 a{color:#fff;width:auto;webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;font-size:16px;letter-spacing:0.15em}
#gotop a{color:#fff}


/* webSeo */section #webSeo,section #webSeo .seo{overflow:hidden;font-size:12px;color:#6b5537}
section #webSeo .seo .js-marquee-wrapper{transition:none;font-size:12px !important}

/* webSeo */
/* footer */
footer{padding:25px 0;background:#2f2f2f;color:#fff}
footer ul{margin:10px 1%;width:31%;display:inline-block}
footer ul li{margin:10px 0;padding:10px 20px;border-bottom:1px #fff solid}
footer ul li a{color:#fff;font-size:18px}

/* footphone */
#footphone{display:none;position:fixed;bottom:0;width:100%;height:40px;background:#0acd00;line-height:40px;z-index:9999}
#footphone a{display:inline-block;color:#fff}
#footphone a:hover{color:#fff}
#footphone li{text-align:center;list-style:none;float:left;width:49.4%;height:40px;line-height:40px}
#footphone li.phone{background:#d30202}
.fixedline{position:fixed;left:20px;bottom:50px;z-index:50}
.fixedline .fixedlineM{position:relative}
.fixedline .fixedlineM a{display:block}
.fixedline .fixedlineM >p{position:absolute;right:-148px;bottom:0;opacity:0}
.fixedline .fixedlineM:hover >p{opacity:1}
.starRating{text-align:left}
.starRating font{margin-right:5px;display:inline-block;vertical-align:middle}
.starRating font:first-child{font-weight:bold;font-size:18px;color:#FF9800}
.starRating font:nth-child(2){font-size:16px;color:#FF9800}
.starRating font:last-child{color:#000;font-size:16px}


@media screen and (max-width:1500px){
	header .menu_box,header .contact_btn{margin-right:1em}
}
@media screen and (max-width: 1440px) {
	section{overflow:hidden;margin:0 auto;width:100%}
    header{
    padding: 1em 2vw;
}
}
@media screen and (min-width: 1281px){
	header .menu_box .menu_list li b{display:none}
	header .menu_box .menu_list li{position: relative;overflow: hidden;}
	header .menu_box .menu_list li:hover{overflow:visible}
	header .menu_box .menu_list li .menu_body,header .menu_box .menu_list li .menu_body .subOption li ul{width: 160px;left: calc(50% - 80px);z-index:1;opacity:0;-webkit-transition:all 0.2s ease-in-out;transform:translate(0,30px)}
	header .menu_box .menu_list li .menu_body ul{background:rgba(var(--black-rgb),.85);text-align:center;background-color:rgb(38 38 38 / 76%)}
	header .menu_box .menu_list li .menu_body ul li{padding:0}
	header .menu_box .menu_list li .menu_body ul li a{display:inline-block;width:100%;padding:10px;border-bottom:1px solid rgb(184 184 184 / 20%);font-size:17px;text-align:center;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
	header .menu_box .menu_list li .menu_body ul li:hover a{background-color:rgb(75 75 75 / 50%)}
	header .menu_box .menu_list li:hover .menu_body{transform:ttranslate(0,10px)}
   header .menu_box .menu_list li .menu_body .subOption li ul{position:absolute;top:0;right:70px}
   .webBox header .menu_box .menu_list li .menu_body .subOption li ul{transform:translate(130px,0);-webkit-transform:translate(130px,0);-moz-transform:translate(130px,0);-ms-transform:translate(130px,0);-o-transform:translate(130px,0)}
   .webBox header .menu_box .menu_list li .menu_body .subOption li:hover > ul{transform:translate(170px,0);-webkit-transform:translate(170px,0);-moz-transform:translate(170px,0);-ms-transform:translate(170px,0);-o-transform:translate(170px,0)}
   header .menu_box .menu_list li .menu_body .subOption li >div a{padding:5px 15px;display:block;padding:10px;border-bottom: 1px solid rgb(184 184 184 / 30%);font-size:15px;font-size:17px;text-align: center;}
   header .menu_box .menu_list li:hover .menu_body,header .menu_box .menu_list li .menu_body .subOption li:hover >ul{z-index:10;opacity:1;-webkit-transform: translate(0, 5px);}
   .webBox header .menu_box .menu_list li:hover .menu_body{-webkit-transform: translate(0, 10px);}
   
}
@media screen and (max-width: 1280px){
	section{width:960px}
	header #webmenu nav ul li b{right:0;position:absolute;padding-left: calc(100% - 30px);padding-top:10px;width:55px;height:55px;display:inline-block;text-align:center;line-height:41px;top:calc((100% - 60px) / 2);left: 0;cursor:pointer}
	header #webmenu nav ul li b i{color:#fff;opacity:0.5}
	#footphone{display:block}
	.fixedline{display:none}
}
@media screen and (min-width:1161px){
	#nav_toggleInner{display:none}
}
@media screen and (max-width: 1160px){
	header{top: 0;background-color: #181818;}
	header .web_logo svg{width:220px}
	header .web_logo svg use{fill:#fff}
	header .web_logo svg .circle_a{fill:#040404}
	header #nav_toggleInner .nav_hamburger span{background:#fff}
	header .menu_box nav{overflow-y:scroll;position:fixed;width: min(100%,350px);height:calc(100vh - 82px);top: 80px;right:0;z-index:9998;pointer-events:none}
	header .menu_box nav::-webkit-scrollbar{width:0}
	header .menu_box nav:before{position:absolute;width:100%;height: 1000vh;background: #181818;opacity:0;top: 0;left:0;content:"";-webkit-transform-origin:right;transform-origin:right;-webkit-transform:scaleX(.1);transform:scaleX(.1);-webkit-transition:-webkit-transform 500ms cubic-bezier(0.525,0.06,0.11,0.995);transition:transform 500ms cubic-bezier(0.525,0.06,0.11,0.995),-webkit-transform 500ms cubic-bezier(0.525,0.06,0.11,0.995)}
	header .menu_box .menu_list{position:relative;padding: 0vh 0;flex-direction:column;align-items:stretch;opacity:0;-webkit-transform:translateY(4em);transform:translateY(4em);-webkit-transition:opacity 50ms linear,-webkit-transform 1ms 50ms linear;transition:opacity 50ms linear,transform 1ms 50ms linear,-webkit-transform 1ms 50ms linear;gap: 0;}
	header .menu_box .menu_list li a{padding:1em 2em;display:block;border-bottom:1px rgb(255 255 255 / 25%) solid;color:#fff}
	header .menu_box .menu_list li .subOption { padding-bottom: 20px; }
	header .menu_box .menu_list li .subOption li a{position: relative;padding: .8em 2em .8em 3em;border-bottom: 1px rgb(255 255 255 / 11%) solid;}
    .menu-open header .menu_box nav{pointer-events:auto}
	.menu-open header .menu_box nav:before{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transition:-webkit-transform 800ms cubic-bezier(0.525,0.06,0.11,0.995);transition:transform 800ms cubic-bezier(0.525,0.06,0.11,0.995),-webkit-transform 800ms cubic-bezier(0.525,0.06,0.11,0.995)}
	.menu-open header .menu_box nav .menu_list{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 400ms 400ms linear,-webkit-transform 800ms 400ms cubic-bezier(0.13,0.095,0.2,0.915);transition:transform 800ms 400ms cubic-bezier(0.13,0.095,0.2,0.915),opacity 400ms 400ms linear,-webkit-transform 800ms 400ms cubic-bezier(0.13,0.095,0.2,0.915)}
	#main{-webkit-transition:-webkit-filter 500ms ease-in-out;transition:filter 500ms ease-in-out,-webkit-filter 500ms ease-in-out}
	#main:before{position:absolute;width:100vw;height:100vh;background:#343434;opacity:0;pointer-events:none;top:0;left:0;z-index:9999;content:"";-webkit-transition:opacity 400ms linear;transition:opacity 400ms linear}
	.menu-open #main{-webkit-filter:blur(1rem);filter:blur(1rem)}
	.menu-open #main:before{opacity:.4;-webkit-transition:opacity 400ms linear;transition:opacity 400ms linear}
	header .contact_btn{margin-right:0}
	header.scroll .menu_box nav{height:calc(100vh - 60px);top:60px}
	header.scroll:before{height: 110px;}
	header .logo_box {width: 190px;}
}
@media screen and (min-width: 1025px) {
	.phoneWrap{display: none !important;}
	footer #footerCompany .plus-information a:hover img{display:block}
	/* ufo bottom */
	#work01:before{content:'';color:#868686;background:#292929;display:block;position:absolute;left:22px;top:-35px;z-index:9999;width:2px;height:20px;color:#868686;transition:all linear .3s;opacity:1}
	#work01{position:fixed;bottom:400px;z-index:99999;padding:5px 5px;background:rgb(255 255 255 / 62%);border:none}
	#work02{position:fixed;bottom:300px;z-index:99999;padding:5px 5px;background:rgb(255 255 255 / 62%);border:none}
	@keyframes blink{0%{opacity:0}
	25%{opacity:1}
	50%{opacity:1}
	75%{opacity:1}
	100%{opacity:1}
	}
	#work01 a{color:#eb1c1c;animation-duration:2.2s;animation-name:blink;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}
	#work02:after{content:'';color:#868686;background:#292929;display:block;position:absolute;left:22px;z-index:9999;width:2px;bottom:-35px;height:20px;color:#868686;transition:all linear .3s;opacity:1}
	#work02 a{color:#020202;width:auto;webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;transition:all linear .2s;font-size:18px;font-weight:500}
	#work02 a:hover{color:#f11}
	#work01 a:hover{color:#020202}
	#work01 a{color:#f11;width:auto;webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;transition:all linear .2s;font-size:18px;font-weight:500}
}
@media screen and (max-width: 1024px) {
	.phoneWrap{display:block;position:fixed;bottom:0px;left:0px;width:100%;z-index:999999999985}
	.phoneWrap ul{text-align:center}
	.phoneWrap ul li{width:45%;box-sizing:border-box;display:inline-block}
	.phoneWrap ul li a{padding:7px 0;background:#ab2626;border:1px #fff solid;border-radius:10px;display:block;color:#fff;text-align:center;box-shadow:0 0 5px #ab2626}
	.phoneWrap ul li + li{border-left:1px solid #fff}
	.phoneWrap ul li a{display:inline-block;width:100%;color:#fff;text-align:center;padding:10px 0px}
}
@media screen and (max-width: 768px) {
	section{width:95%}
	footer ul{width:98%}
}
@media screen and (max-width: 640px){
    #work02{bottom: 120px;}
    #work01{bottom: 210px;}
    #work01 a, #work02 a{width: 30px;}
	#webmenu_mb { width: 100vw; }
	#webmenu_mb[data-type="2"] {padding-bottom: 20vh;height: 100vh;}
	#webmenu_mb ul { min-width: 100%; }
}
@media screen and (max-width: 550px){
	header .web_logo svg,header.scroll .web_logo svg{width:200px}
	header .menu_box{margin-right:0}
	header .contact_btn{display:none}
	#webmenu_mb .logo_box { top: 35px; }
}
@media screen and (max-width: 480px) {
	#wh-widget-send-button.wh-widget-right{bottom:28px!important}
}