/*-----------------------------------------------
    device width test 
-----------------------------------------------*/
.test_r{position: fixed;width: 5px; height: 10px; z-index: 9999;left: 0;}
@media screen and (min-width:1921px) {/*--帶魚屏--*/
    .test_r{ background-color: #410000;position: fixed;width: 10px; height: 10px; z-index: 9999;left: 0;}
}
@media screen and (max-width:1680px) {/*--桌機--*/
    .test_r{ background-color: #c2c2c2;}
}
@media screen and (max-width:1480px) {/*--筆電--*/
 .test_r{background-color: #ff6c6c79;}
}
@media screen and (max-width:1280px) {/*--小筆電--*/
.test_r{background-color: #899cff79;}
}
@media screen and (max-width:768px) {/*--ipad--*/
    .test_r{background-color: #e5ff00c2;}
}
@media screen and (max-width:480px) {/*--and--*/
    .test_r{background-color: #ff0000c2;}
}
@media screen and (max-width:400px) {/*--ios--*/
    .test_r{background-color: #4369bac2;}
}
/*-----------------------------------------------
    Import
-----------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');  


/*-----------------------------------------------
    reset
-----------------------------------------------*/
html ,body{box-sizing: border-box;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

* ,*::before ,*::after ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p ,button a ,li a ,.df-form{
    margin: 0;padding: 0;box-sizing: border-box;outline: none;
    font-family: 'Montserrat', 'Noto Sans JP', 'Noto Sans TC', 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', Arial, sans-serif;
    font-size: 15px;font-weight: 400;
}

@media screen and (max-width:768px){
     * ,*::before ,*::after ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p ,button a ,li a ,.df-form
    {font-size: 14px; } 
}

button ,select ,textarea ,option ,input{
    line-height: inherit; border: 0;border-style: none;font-family: inherit;font-size: inherit;outline: none;background: transparent;
}

html ,body ,header ,section ,article ,footer ,button ,li ,.df-width{position: relative; }

button::-moz-focus-inner ,input::-moz-focus-inner{padding: 0;border: 0; }

h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,.h1 ,.h2 ,.h3 ,.h4 ,.h5 ,.h6 ,p ,button a ,li a ,.df-form
{margin-top: 1em;margin-bottom: .6em;line-height: 1.75;letter-spacing: 0;word-wrap: break-word;word-break: break-all; }


.ellipsis
{display: -webkit-box;height: 72px;overflow: hidden;text-overflow: ellipsis; }



/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width{position: relative;margin: auto;width: 100%;max-width: 768px; }

/*-----------------------------------------------
    link
-----------------------------------------------*/

a ,a:active ,a:hover ,a:focus{
    color: #000;-webkit-user-select: none;transition: all .3s;text-decoration: none;pointer-events: auto;outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none; }

button a,li a{display: block;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}


/*focus*/
button:focus ,input:focus ,select:focus ,textarea:focus{outline: #000 slash 2px;outline-offset: .02em;box-shadow: none; }

/*for-link*/
.for-link a {width: 100%;height: 100%;display: block;}



/*-----------------------------------------------
    df-img
-----------------------------------------------*/

img{display: block;max-width: 100%;border: 0;border-style: none;vertical-align: middle; }

.img-auto
{max-width: initial; }

/*-----------------------------------------------
    df-button
-----------------------------------------------*/
button
{cursor: pointer;font-size: .9rem;text-align: center;text-decoration: none;letter-spacing: .1rem; }


/*-----------------------------------------------
    df-list
    clear-both
-----------------------------------------------*/

ul{height: 100%; }

ol{padding: 0 0 0 4%; }

ul li{list-style: none; }

ol > li > a{color: #00ff08;text-decoration: none; }



@media screen and (max-width:768px){
    ol > li ,.ol > li > a
    {font-family: 'Microsoft JhengHei', serif; }
 }


/*-----------------------------------------------
    df-video
-----------------------------------------------*/
/*隱藏沒有靜音並設定自動播放的影片*/
video[autoplay]:not([muted])
{display: none; }

.df-video
{display: block;position: relative;padding: 0;padding-bottom: 56.25%;/*16by9*/height: 0;/* overflow: hidden; */ }

.df-video:before
{position: absolute;top: -3px;left: -3px;width: calc(100% + 6px); height: calc(100% + 6px); border: 1px solid #5e5e5e; content: ''; }

.df-video-item
{ position: absolute;top: 0;top: 50%;bottom: 0;left: 0;left: 50%;width: 100%;height: 100%;border: 0;transform: translate(-50%, -50%); }

/*-----------------------------------------------
    df-hr
-----------------------------------------------*/

hr{display: block;margin-top: 50px;margin-bottom: 50px;width: 100%;height: 5px;border: 0;border-top: 1px solid #eee;/*border-bottom:5px dotted #fff;*/ }

/*  df-box
-------------------------------------------------
    - df-close
    - df-cover
    - box-content
    - box-open & close
------------------------------------------------*/

/*-----------------------------------------------
    df-close
-----------------------------------------------*/
.df-close:hover{transform: rotateZ(180deg); }

.df-close
{display: inline-block;position: absolute;top: -40px;right: 0;z-index: 999;z-index: 10;opacity: 1;width: 35px;height: 35px;cursor: pointer;overflow: hidden;
transition: all .5s;transform-origin: 50% 50%; }

.df-close::before ,.df-close::after
{position: absolute;top: 50%;width: 100%;height: 0.18rem;border-radius: 5px;content: '';background: #fff; }

.df-close::before
{-webkit-transform: rotate(45deg);transform: rotate(45deg); }

.df-close::after
{-webkit-transform: rotate(-45deg);transform: rotate(-45deg); }



/*-----------------------------------------------
    df-form
-----------------------------------------------*/
input.df-form ,select.df-form ,input[type='text'] ,input[type='number'] ,select ,textarea
{   display: block;
    margin: 20px auto;
    opacity: 1;
    width: 100%;
    height: 40px;
    min-width: 200px;
    max-width: 300px;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 5px;
    font: inherit;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-align: center;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    /*hidden dragdown icon*/

            appearance: none;
       -moz-appearance: none;
    -webkit-appearance: none; }

select.df-form
{color: #979797; }

input.df-form:focus ,select.df-form:focus
{   color: #000;
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }

/*-----------------------------------------------
    blur
-----------------------------------------------*/
@keyframes blur {
    0% {
        opacity: 0;
        filter: blur(15px);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
    }
}
/*-----------------------------------------------
    df-gotop
-----------------------------------------------*/
.gotop
{    /*display: block; */
    display: none;
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 99;
    opacity: .5;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    color: #fff;
    border-radius: 100px;
    box-sizing: border-box;
    transition: all .3s;
    background: #000; }

.gotop::after
{
    display: block;
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    margin: auto;
    width: .8rem;
    height: .8rem;
    color: #fff;
    border-top: 1px solid;
    border-right: 1px solid;
    box-sizing: border-box;
    content: '';
    transform: rotate(-45deg); }


.gotop:focus
{
    outline: none; }

.gotop:hover
{
    opacity: .9;
    transition: all .3s ease;
    transform: scale(1.2); }

@media screen and (min-width:1921px)
{
    .gotop
    {
        right: 21rem; } }


@media screen and (max-width:767px)
{
    .gotop
    {
        right: 5px;
        transform: scale(.7); }

    .gotop:hover
    {
        transform: scale(1); } }

/*  hide
-------------------------------------------------
    - hidden-sm  : show 0-768px
    - hidden-xs  : show 0-480px
-------------------------------------------------*/
.pc{display: block;opacity: 1;pointer-events: auto; }
.tablet ,.mobile{display: none;pointer-events: none; }

@media screen and (max-width:768px)
{/* show 768px ↑ */  .pc{ display: none;opacity: 0;pointer-events: none; }
  /* show 0-768px */ .tablet{display: block;pointer-events: auto; } } 

@media screen and (max-width:480px)
{/* show 0-480px */ .mobile{display: block;width: auto;height: auto;pointer-events: auto; } }