@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/SeoJump.css');

* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin:0; }
body ::selection { background: #353637; color: #fff; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #c5c5c5; }
body::-webkit-scrollbar-thumb { background: #0d1011; }
body::-webkit-scrollbar-thumb:hover { background: #393939; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, a, i{text-align: left;vertical-align: middle;margin: 0;padding: 0;line-height: 170%;border-width: 0;font-family: 'Inter', 'Noto Sans TC', sans-serif;font-size: 16px;word-wrap: break-word;word-break: break-all;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;color: #333333;}

:before , :after { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; }

ul, ol { list-style: none; }

fieldset { border: 0; }

input,button,select,textarea { outline:none }

img { max-width: 100%; }

a:link , a:visited , a:hover { text-decoration: none; vertical-align: initial; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

livedemo00.template-help:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.text-clamp { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }

/* a.photo */
a.photo , .bgBox { 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 { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

embed { width:100% }

/* webBox */
.webBox { position: relative; overflow: hidden; width: 100%; }
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; }
.webBox .wrapper {position: relative;background: #fff;}

/* workframe */
.workframe { position: relative; margin: 0 auto; width: 80vw; }

/* header */
header {position: fixed;padding: 10px 1%;width: 98%;background: rgba(4, 4, 4, .9);font-size: 0;display: flex;align-items: center;}
header #topMenu ul { text-align: right; }
header.headerTop {padding: 15px 1%;}

/* banner */
.wow{animation-name:fadeInDown;-webkit-animation-name:fadeInDown;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-fill-mode:both;-webkit-animation-fill-mode:both;animation-duration:1s;-webkit-animation-duration:1s}
#banner{position:relative}
#banner .main_section01 .text_in .step02{position:absolute;left:0%;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:100%;z-index: 24;transition:all 0.5s ease 1s;-webkit-transition:all 0.5s ease 1s;}
#banner .main-page.white{background:#fff}
#banner .img{
    z-index: -2;
    position: relative;
}

#banner .main_section01.act .text_in .step02,.main_section01.act .main-bg{opacity:1}
#banner .main_section01 .text_in .step02 p{font-size:110px;font-family:Catamaran;font-weight:bold;line-height:0.8;text-align:center;color:#000000}
#banner .main_section01 .text_in .step02 p span{display:table;margin:0 auto 0 12vw;font-weight:700;line-height:160%;font-size:3.5vw;width:31%;text-align:justify}
#banner .main_section01 .text_in .step02 p span.subtitle{font-size:1.6rem;border-bottom:0;font-weight:500;margin-top:30px}
#banner .main_section01 .text_in .step02 p span + span{margin-top:0.4em}
#banner .main_section01 .text_in .step02 .txt{
    position: relative;
    z-index: 100;
}
#banner .main_section01 .ani_move{height: 100vh;width:100%;position:absolute;left:0%;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);display:table;align-items:center;text-align:center;justify-content:center;transition:all 0.5s;z-index:2}
#banner .main_section{position:relative;z-index:2}
#banner .main-bg{
    position: relative;
}
#banner .main-bg{background:url(/images/2020/img_main_sec01.png) center center no-repeat;background-size:cover;height:100%;width:100%;position:absolute;top:0;left:0;z-index: 1;}
#banner .main-bg{animation: scale 6s ease infinite alternate;}
@keyframes scale{0%{transform:scale(1.1)}
100%{transform:scale(1)}
}

 .main_section01 {background: #ffffff;align-items:center;height: 100vh;width: 100vw;margin: 0;}
    .blob-container {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      z-index: 0;
    }

#banner .blob-container canvas{position:absolute;top:0;left:0;z-index: -1;}
#banner .txt span.reg-text{font-weight:600;font-size:1.4rem;margin-bottom:50px}
#banner .txt .titleEn{letter-spacing:2px;font-size:50px;display:flex;font-weight:800;gap:10px}
#banner .txt .titleEn .textBorder{display:inline-block;color:transparent;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#000000;letter-spacing:2px;font-size:50px}
#banner .txt .box{padding:35px 0 5px 0;border-width:1px 0}
#banner .txt .box h3{font-size:38px;display:none}
#banner .txt h1,#banner .txt h2,#banner .txt h2 *,#banner .txt h3,#banner .txt p{text-align:initial;letter-spacing:0px;font-size:30px}
#banner .txt p.reg-text{animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft;margin-top:20px;transform:translateY(100px);opacity:0;transition:transform 1.3333333333s ease-out,opacity 3s ease}
#banner .txt article{display:flex;justify-content:flex-start;align-items:center;margin:50px auto 0 12vw;gap:10px}
#banner .txt article b{display:inline-block;font-weight:500;background:rgb(255 255 255 / 70%);border:1px solid #d61a1a;font-size:17px;line-height:180%;color:#050505;border-radius:30px;letter-spacing:0.5px}
#banner .txt article b:nth-child(2){background:rgb(255 255 255 / 70%);background:-webkit-linear-gradient(220deg,#d61a1a 20%,#cb4838,#D97A4D 90%);color:#ffffff}
#banner .txt article b:nth-child(2) a{color:#fff}
#banner .txt article b a{display:block;padding:10px 24px}
#banner .txt p.loaded,#banner .txt article.loaded{opacity:1;transform:translateY(0);text-align:left;width:100%;font-size:1.2rem;display:flex;align-items:center;gap:10px;justify-content:center}
#banner .txt p.loaded{margin-top:35px;padding-left:107px}
#banner .txt p.loaded:before{content:"";width:75px;height:2px;background-color:#333;position:absolute;top:50%;left:5px;z-index:1;-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:.3}

#banner .txt h1 {margin: 15px 0;line-height: 120%;font-size: 49px;}
.side_btn{position:fixed;left:43px;bottom:46px;display:flex;align-items:center;justify-content:center;width:118px;height:118px;display:flex;align-items:center;justify-content:center;z-index:50}
.side_btn::before{content:'';width:100%;height:100%;position:absolute;left:0;top:0;background: url(/images/2020/img_text_side.png) no-repeat;background-size:100%;animation:rotate 10s linear infinite}
.side_btn a{position:relative;width:88px;height:88px;display:block;text-align:center;line-height:88px}
.side_btn a::before{content:'';width:100%;height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#d61818;opacity:0.25;display:none}
.side_btn a::after{content:'';width:67px;height:67px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#d61818;z-index:9}
.side_btn a img{width:26px;z-index:10;vertical-align:middle;position:Absolute;left:50%;top:50%;margin-top:-11px;margin-left:-13px}
@keyframes footbtn{0%{bottom:-50%;transform:scale(1)}
50%{bottom:75%;transform:scale(1.2)}
100%{bottom:75%;transform:scale(1.4);opacity:0}
}@keyframes rotate{0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}



#banner .txt h3,#banner .txt h2{display: none;}
#banner .txt h2 font { display: inline-block; font-size: 66px; }
#banner .txt h2 b { margin: 0 5px; display: inline-block; line-height: 100%; font-family: 'Noto Sans TC', sans-serif; font-size: 125px; }
#banner .txt h2 font span { display: block; line-height: 100%; font-size: 51px; }
#banner .txt h2 font span:last-child { font-size: 35px; }
≈ {letter-spacing: 1px;font-weight: bold;font-size: 33px;}

.text-container{width:100%;color:#131313;letter-spacing:4px;font-size: 58px;-webkit-font-smoothing:antialiased;text-align:center;display:flex;justify-content:flex-start;flex-wrap:wrap;line-height: 150%;font-weight: 500;margin-top: 20px;}
.text-container  span{display:inline-block}
.text-container  .reg-text{transform:translateY(100px);opacity:0;transition:transform 1.3333333333s ease-out,opacity 3s ease;}
.text-container  .reg-text.loaded{opacity:1;transform:translateY(0);display:block;text-align:left;width:100%;font-size: 1.6rem;line-height: 160%;}
.text-container  .letter{transition:transform 3s cubic-bezier(0.43,0.1,0.57,0.9),filter 5s ease,opacity 5s ease;opacity:0;filter:blur(5px);}
.text-container .letter:nth-of-type(2){transform:translateY(-160px);transition-duration:1.5s;}
.text-container .letter:nth-of-type(3){filter:blur(0);transform:translateY(-170px);transition-duration:1.8461538462s;}
.text-container .letter:nth-of-type(4){transform:translateY(-200px);transition-duration:1.3333333333s;}
.text-container .letter:nth-of-type(5){transform:translateY(-150px);transition-duration:1.5s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(6){filter:blur(0);transform:translateY(-180px);transition-duration:1.1739130435s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(7){filter:blur(0);transform:translateY(-190px);transition-duration:1.3333333333s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(8){filter:blur(0);transform:translateY(-210px);transition-duration:1.8461538462s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(9){filter:blur(0);transform:translateY(-210px);transition-duration: 2s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(10){filter:blur(0);transform:translateY(-210px);transition-duration: 2.2s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(11){filter:blur(0);transform:translateY(-210px);transition-duration: 2.4s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(12){filter:blur(0);transform:translateY(-210px);transition-duration: 2.6s;color: #000000;font-weight: 700;}
.text-container .letter:nth-of-type(13){filter:blur(0);transform:translateY(-210px);transition-duration: 2.8s;color: #000000;font-weight: 700;}
.text-container .letter.loaded{opacity:1;transform:translateY(0);filter:blur(0);}

#example{position: absolute !important;right: -60px;bottom: 50px;width: 1200px;background-repeat: no-repeat;background-size: contain;}
#example .one{width: 370px;top: unset !important;bottom: -20px;left: -55% !important;}
#example .two{right: 190px;left: unset !important;width: 370px;top: unset !important;bottom: -10px;}

/* callus */
.callus { margin: 80px 0 30px; text-align: center; }
.callus a { position: relative; padding: 15px 50px 15px 80px; display: inline-block; }
.callus img { position: absolute; width: auto; left: 0; }
.callus font { display: block; font-weight: 400; font-size: 24px; color: #be161a; }
.callus font:last-child { font-weight: 600; font-size: 30px; }
.callus p { margin-top: 60px; text-align: center; }
.callus p a {padding: 11px 40px;font-size: 20px;color: #fff;background: -webkit-linear-gradient(220deg, #d61a1a 20%, #cb4838, #D97A4D 90%);border-radius: 30px;text-align: center;}

#moreContent {padding: 5px 40px;background: #be161a;font-size: 20px; color: #fff;}

/* webSeo */
#webSeo { overflow: hidden; margin-top: 40px; width: 100%; }
#webSeo .seo > div , #webSeo .seo > div * { font-size: 12px !important; color: #585858; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* phoneWrap */
.phoneWrap {position: fixed;width: 100%;height: 46px;display: none;line-height: 40px;bottom: 0;z-index: 999;}
.phoneWrap a {display: block;color: #fff;padding: 10px 0;text-align: center;}
.phoneWrap a:hover { color: #fff; }
.phoneWrap ul { font-size: 0; }
.phoneWrap ul li {width: calc((100% - 2px) / 1);background: -webkit-linear-gradient(220deg,#d61a1a 20%,#cb4838,#D97A4D 90%);display: inline-block;text-align: center;border-left: 1px solid #ffffff8f;}
.phoneWrap li a i { margin-right: 5px; padding: 5px; background: rgba(0, 0, 0, .29); border-radius: 50%; }
.phoneWrap li.line{
    display: none;
}
@media screen and (max-width: 1440px) {
	.workframe { width: 90vw; }
}
@media screen and (max-width:1280px){
    header #topMenu ul{display:flex;flex-direction:column}
}
@media screen and (max-width: 1024px) {
	.text-container{display:flex;justify-content: center;font-size: 50px;}
	.text-container .reg-text.loaded{text-align:center;}
	#banner .txt .box{padding: 0;}
	#banner .txt article b{padding:5px 20px;}

#banner .main_section01 .text_in .step02{top: 30%;}
#banner .main_section01 .text_in .step02 p span{margin:0 auto;font-size: 6.8vw;width:100%;text-align:center}
#banner .txt article{margin: 25px auto 0;display:flex;flex-direction:row;align-items:center;justify-content:center}
#banner .main_section01 .text_in .step02 p span.subtitle{font-size: 1.2rem;margin-top:10px;width: 82%;}
#banner .main-bg{background:url(/images/2020/img_main_sec01-m.png) center center no-repeat;background-size: 100%;background-position: 50% 40%;}
#banner .main_section01-bg{background:url(/images/2020/mo-main-dim.png) no-repeat center center}
#banner .main_section01-bg::before{background:url(/images/2020/mo-main-dim2.png) no-repeat center center}
#banner .main-bgani{background:url(/images/2020/mo_img_main_sec02.png) center center no-repeat;background-size:100% auto}
}
@media screen and (max-width: 768px) {
	.side_btn{display:none}
#banner .main-bg{background-size: 100%;background-position: 50% 40%;}
}
@media screen and (max-width: 640px) {
	.main_section01 {
    height: 90vh;
}
	.callus {margin: 0;font-size: 0;}
	.callus a {padding: 15px 0;width: 70%;}
    .callus p a{font-size: 16px;padding: 10px 30px;width: 60%;}
	.callus embed { position: relative; margin: 0 auto 10px; width: 60px; display: block; }
	.callus font { text-align: center; font-size: 18px; }
	.callus font:last-child { font-size: 20px; }
	.callus p{margin-top:0}
	.callus p a.namore{font-size: 17px;}
	.phoneWrap{display:block}
	header{width: 90%;padding: 10px 5%;}
	header.headerTop{width: 90%;padding: 10px 5%;}
	.text-container .reg-text, .text-container .letter{font-size: 33px;line-height: 150%;}
	#banner .txt article{font-size:12px;}
	#banner .txt article b{font-size:15px;padding: 5px 10px;margin: 2px;}
	#banner .txt article{margin:0;}
	#banner .main-bg{background-position: 50% 20%;}
	#banner .main_section01 .text_in .step02{top: 31%;}
}

@media screen and (max-width: 325px) {
	#banner .txt {top: 120px;}
	.callus a { width: 100%; }
}