@charset "utf-8";
/*
  danny 201912
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Open Sans','Arial','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}





/* $font
--------------------------------------------------------------------------------------*/

:before ,:after{ font-family:'icomoon',"微軟正黑體",sans-serif;}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; min-height: 100%; font-size: 10px; font-family:"微軟正黑體","蘋果儷黑體","新細明體",Arial,Helvetica,sans-serif; font-weight: 300; }





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset */
button{ font-family:"微軟正黑體","蘋果儷黑體","新細明體",Arial,Helvetica,sans-serif; border: none; }

/* input reset */
input{ font-family:"微軟正黑體","蘋果儷黑體","新細明體",Arial,Helvetica,sans-serif; border: none; }

/* select reset */
select{ font-family:"微軟正黑體","蘋果儷黑體","新細明體",Arial,Helvetica,sans-serif; }





/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; -webkit-text-size-adjust:none; }

/* header */
header{ display: flex; justify-content: center; width: 100%; height: 60px; background: #fff; position: fixed; z-index: 2; transition: all 1s cubic-bezier(.23,1,.32,1); z-index: 9999; }
header.on{ height: 100vh; padding: 20vh 0 0 0; }
.header-box{ display: flex; width: 100%; height: 100%; box-sizing: border-box; padding: 0 3vw 0 3vw; }
header h1{ width: 50px; height: 50px; line-height: 0; position: fixed; top: 5px; left: 3vw; }
header h1 a{ width: 100%; height: 100%; text-indent: -9999px; position: relative; }
header h1 a img{ display: block; width: 100%; position: absolute; left: 0; top: 0; }
/* 漢堡選單 */
.navToggle-box{ position: absolute; right: 2.5vw; top: 5px; z-index: 999; overflow: hidden; }
.navToggle{ width:45px; height:44px; box-sizing:border-box; padding:.4em;}
.navToggle span ,.navToggle span:before ,.navToggle span:after{ display:block; width:100%; background:#000; height:2px; border-radius:2px;}
.navToggle span{ position:relative; top:50%; }
.navToggle span:before ,.navToggle span:after{ content:''; position:absolute; }
.navToggle span:before{ top:-.5em; }
.navToggle span:after{ bottom:-.5em; }.navToggle.navToggle02 span{ transition:background .3s .4s;}
.navToggle.navToggle02 span:before{ transition:transform .1s .3s ,top .3s .7s;}
.navToggle.navToggle02 span:after{ transition:transform .1s .3s ,bottom .3s .7s;}
.navToggle.navToggle02.on span{ background:none; transition:background .3s;}
.navToggle.navToggle02.on span:before{ top:0; transform:rotate(45deg); transition:top .2s .1s,transform .2s .4s;}
.navToggle.navToggle02.on span:after{ bottom:0; transform:rotate(-45deg);  transition:bottom .2s .1s,transform .2s .4s;}

/* mainmenu */
.mainmenu-box{ display: flex; flex-direction: column; font-size: 1.5rem; color: #000; display: none; }
.mainmenu-box.on{ display: flex; margin: 0 auto; }
.mainmenu-box>li+li{ margin: 25px 0 0 0; }
.mainmenu-box>li a{ display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2em; }
.mainmenu-box>li a p:last-child{ font-size: 1.2rem; }
.mainmenu-box>li a:after{ content: ''; display: block; width: 0; height: 4px; background: #000; margin: 3px auto 0; transition: all .4s cubic-bezier(.23,1,.32,1); }
.mainmenu-box>li:hover a:after,.mainmenu-box>li.on a:after{ width: 100%; }

/* loading */
.loading-container{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #fff; position: fixed; top: 0; z-index: 9999; }
.cssload-container{ display: block; margin:49px auto; width:97px; }
.cssload-loading i{ width: 49px; height: 49px; display: inline-block; background: rgb(215,215,215); border-radius: 50%; }
.cssload-loading i:nth-child(1){ animation:cssload-loading-ani1 1.15s ease-in-out infinite; }
.cssload-loading i:nth-child(2){ background: rgb(237,237,237); margin-left: -10px; animation:cssload-loading-ani1 1.15s ease-in-out 0.58s infinite; }
@keyframes cssload-loading-ani1{ 70%{ transform:scale(0.5); } }


/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){


}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

html,body{ min-width: 100%; min-height: 100vh; }

/* header */
header{ display: flex; justify-content: center; width: 100%; height: 100px; background: #fff; position: fixed; top: 0; z-index: 9999; }
.header-box{ display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1440px; height: 100%; box-sizing: border-box; padding: 0 20px 0 20px; }
header h1{ width: 57px; height: 57px; line-height: 0; position: static; top: 0; left: 0; }
header h1 a{ width: 100%; height: 100%; text-indent: -9999px; position: relative; }
header h1 a img{ display: block; width: 100%; position: absolute; left: 0; top: 0; }
/* 漢堡選單 */
.navToggle-box{ display: none; }
/* mainmenu */
.mainmenu-box{ display: flex; flex-direction: row; font-size: 1.5rem; color: #000; }
.mainmenu-box>li+li{ margin: 0 0 0 30px; }
.mainmenu-box>li a{ display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2em; }
.mainmenu-box>li a p:last-child{ font-size: 1.2rem; }
.mainmenu-box>li>p:last-child{ font-size: 1.2rem; text-align: center; }
.mainmenu-box>li a:after{ content: ''; display: block; width: 0; height: 4px; background: #000; margin: 3px auto 0; transition: all .4s cubic-bezier(.23,1,.32,1); }
.mainmenu-box>li:hover a:after,.mainmenu-box>li.on a:after{ width: 100%; }



}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}