@import url('/Other/www.i-web/css/fontawesome-all.css');
@import url('/Other/www.i-web/css/font-awesome.min.css');
@import url('/Other/www.i-web/css/fontawesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans:wght@400;700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Noto+Serif+TC:wght@200;300;400;500;600&family=Noto+Serif:wght@400;700&family=Jost:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*:focus { outline: none; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, select, textarea, ul, li, img, svg, span, font, strong, b, a, i { text-align: left; vertical-align: middle; word-wrap: break-word; word-break: break-word; line-height: 170%; border-width: 0; font-family: var(--font-family), sans-serif; font-size: 16px; color: var(--info); }

ul , ol { list-style: none; }

fieldset { border: 0; }

input[type="text"] , input[type="tel"] , input[type="number"] , button , select , textarea { padding: .3rem 1rem; width: 100%; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .2rem; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }
input[type="password"] { font-family: auto; }
select { padding: .3rem 1rem; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 5l-6.5 7L1 5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") white no-repeat calc(100% - .5em) 50% / auto .5em; }

/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }

a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }

/* general class set */
.txt_clamp { overflow: hidden; height: 27px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.d_inblock.txt_clamp { display: -webkit-inline-box; }
.atag_item { width: 100%; height: 100%; top: 0; left: 0; }
.nowrap_box { font-size: 0; }
.white_nowrap { white-space: nowrap; }
.jost_txt { font-family: 'Jost', sans-serif; }
.poppins_txt { font-family: 'Poppins', sans-serif; }
.flex_wrap {flex-wrap: wrap;}
.flex_direction { flex-direction: column; }
.txt_uppercase { text-transform: uppercase; }
.writing_rl { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }

/* visually-hidden */
.visually-hidden, .sr-only { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; }

/* btn */
.btn { padding: .2em .5em; border-width: 1px; border-style: solid; text-align: center; line-height: 110%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* badge  */
.badge { padding: .3em .7em; border-radius: .25rem; line-height: 1; font-weight: 400; font-size: 75%; text-align: center; white-space: nowrap; vertical-align: baseline; }
.badge_pill { padding-right: .7em; padding-left: .7em; border-radius: 10em; }

/* photo,bg_box */
a.photo , .bg_box { overflow: hidden; background: no-repeat 50% / cover; display: block; }

/* fancybox */
[class^="fancybox-"] , [class^="fancybox-"] * , .slick-track , .fa , .fas , .fa:before , .fas:before , .fa:after , .fas:after , .trans_none_box { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
.fancybox-infobar__body span { font-size: inherit; color: currentcolor; vertical-align: initial; }

/* pageh1 */
.pageh1 { position: absolute; z-index: 1; }

/* wrapper , wraper */
.wrapper , .wraper { overflow: hidden; position: relative; width: 100vw; min-height: 100vh; z-index: 2; }

/* particles_box */
#particles_box { position: fixed; width: 100vw; min-width: 100vw; height: 100vh; min-height: 100vh; background: #181818; z-index: 2; }
#particles_box canvas { opacity: .2; }

/* workframe , webframe */
.workframe , .webframe {margin: 0 auto;width: 85vw;}
#wrap .webframe { padding: 3vmax; background: #f6f6f6; }

/* header */
header{position:fixed;padding:1em 5vw;width:100vw;display:flex;justify-content:space-between;align-items:center;left:0;top: 40px;z-index:9999;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
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}
header .menu_box .menu_list li p{width: 100%;display: flex;}
header .menu_box .menu_list li a{padding:.5em 1em;font-weight:500;color: #fff;width: 100%;}
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; }

/* web_lines */
#web_lines { width: 855px; height: 100vh; border: #1f1f1f solid; border-width: 0 1px; top: 0; left: calc((100% - 855px) / 2); pointer-events: none; z-index: -1; }

/* footer */
footer { padding: 5vw 5vw 30px; }
footer .top_box { padding: 0 15px 20px; border-bottom: 1px var(--g_300) solid; }
footer .top_box #f_logo { width: 300px; }
footer .top_box .links .btn { padding: 10px 20px; }
footer .top_box .links .phone { margin-left: 20px; }
footer .top_box .links .phone b:nth-child(2) { font-size: 26px; }
footer .info_box { margin: 2vw 15px 3vw; }
footer .info_box .item * { min-width: 70px; font-family: 'Jost', var(--font-family), sans-serif; font-weight: 500; }
footer .info_box .item h4 { font-size: 20px; }
footer .info_box .item h4:before { margin-right: 15px; width: 45px; height: 2px; background: var(--info); display: block; content: ""; }
footer .info_box .item.txt_box p { width: 85%; font-weight: 400; font-size: 14px; }
footer .bottom_box {margin: 0 15px;display: flex;justify-content: flex-end;}
footer .cop{margin-right: 15px;}
footer .bottom_box .cop * { font-weight: 300; font-size: 14px; color: var(--g_400); }
footer .bottom_box .community a { margin: 0 10px; line-height: 1; }
footer .info_box .footer_line svg { width: 50px; height: 50px; fill: #06BB06 }

/* webSeo */
#webSeo { padding: 5px 0; white-space: nowrap; box-sizing: border-box; }
#webSeo .seo { padding-left: 100%; font-size: 13px; opacity: .3; }

/* gotop */
#gotop {background: var(--primary);right: .5em;bottom: 143px;z-index: 99;border-radius: 150px;width: 56px;height: 56px;border: #ffffff5e 2px solid;}
#gotop i { font-size: 20px; color: #fff; }

footer .bottom_box .partnerJ a { display: flex; }

#fix_line {bottom: 50px;right: .5em;-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index: 98;}
#fix_line a {width: 56px;height: 56px;background: #06BB06;border-radius: 50%;border: 1px solid #d5d5d5;align-content: center;}
#fix_line a svg { width: 60%; height: 100%; fill: #fff; }
#fix_line a font { font-size: 14px; color: #fff; }

@media screen and (max-width:1500px){
	header .menu_box,header .contact_btn{margin-right:1em}
}
@media screen and (min-width: 1441px){
	.workframe , .webframe { width: 1366px; }
}
@media screen and (max-width: 1460px){
	#webmenu nav a{font-size:16px;display: flex;justify-content: center;}
	footer .info_box .item:last-child { margin-top: 15px; }
	footer .info_box .footer_line{display: flex;margin-top: 10px;}
	footer .info_box .footer_line a{background-color: #06BB06;border-radius: 50px;padding: 10px 30px;}
	footer .info_box .footer_line svg{margin-right: 10px;margin-bottom: 0;width: 35px;height: 35px;fill: #ffffff;}
	footer .info_box .footer_line font{color: #fff;}
}
@media screen and (min-width: 1281px){
	
}

@media screen and (min-width:1161px){
	#nav_toggleInner{display:none}
	 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%);width: 100%;}
	 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);display: flex;position: absolute;padding-top: 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, 0px);}
	.webBox header .menu_box .menu_list li:hover .menu_body{-webkit-transform: translate(0, 10px);}
	
}
@media screen and (max-width: 1160px){
	footer .info_box .item.txt_box p { width: 100%; }
	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}
	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:82px;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:#222;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}
	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;}
	footer { padding: 5vw 2vw 30px; }
	footer .info_box .item.txt_box { margin: 1rem 0; }
	#gotop {right: 0px;bottom: 60px;}
	.phoneWrap {width: calc(100% - 0px);bottom: 0;left: 0;z-index: 99;}
	.phoneWrap ul { width: 100%; display: flex; }
	.phoneWrap ul li { width: 50%; }
	.phoneWrap ul li + li {border-width: 0 1px;}
	.phoneWrap ul li a {width: 100%;height: 50px;background: rgb(204,24,187);background: -moz-linear-gradient(left, rgba(204,24,187,1) 0%, rgba(255,131,64,1) 100%);background: -webkit-linear-gradient(left, rgba(204,24,187,1) 0%,rgba(255,131,64,1) 100%);background: linear-gradient(to right, rgba(204,24,187,1) 0%,rgba(255,131,64,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc18bb', endColorstr='#ff8340',GradientType=1 );display: flex;justify-content: center;align-items: center;font-weight: 400;color: #fff;}
	.phoneWrap ul li.line a {background: #06bb06;background: -moz-linear-gradient(left, rgba(60,91,180,1) 0%, rgba(55,205,229,1) 100%);background: -webkit-linear-gradient(to right,#06bb06 0%,#92cd37 100%);background: linear-gradient(to right,#06bb06 0%,#92cd37 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c5bb4', endColorstr='#37cde5',GradientType=1 );}
    footer .bottom_box{ padding-bottom: 45px; }
	#fix_line { display: none; }
	header .logo_box {width: 190px;}
}
@media screen and (max-width: 1160px) and (min-width: 641px){
	footer .top_box .links { width: 260px; }
	footer .top_box .links .phone { margin-left: 0; }
}
@media screen and (max-width: 980px){
	footer .info_box .footer_line a {justify-content: flex-start;}
	footer .info_box .footer_line a svg { margin:0 .5em 0 0; width: 40px; height: 40px; }
}
@media screen and (max-width: 640px){
	#wrap .webframe {padding: 20px 4vw;width: 100vw;}
	#webmenu_mb { width: 100vw; }
	#webmenu_mb[data-type="2"] {padding-bottom: 20vh;height: 100vh;}
	#webmenu_mb ul { min-width: 100%; }
	footer .top_box .links { margin-top: 20px; }
	footer .partnerJ{position: relative;width: 100%;padding-bottom: 10px;justify-content: center;margin-top: 0px;}
	footer .bottom_box .partnerJ a{display:flex;}
    footer .bottom_box{display: flex;justify-content: center;}
}
@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; }
	footer .top_box #f_logo { width: 250px; }
	footer .top_box .links .btn { padding: 10px 15px; min-width: inherit; }
	footer .top_box .links .phone b:nth-child(2) { font-size: 20px; }
}