/*2021-04-09*/
    html {
        overflow-x: hidden;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
    }

    body {
        margin: 0;
        line-height: 1.5;    
        
        /* background-color: burlywood; */
    }

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
    }

    .width1200-adj {
        margin: 0 auto;
        width: 1920px;
        /* background-color: rgb(256, 256, 256); */
    }

    @media (min-width: 1041px) and (max-width: 1919px) {
        .width1200-adj {
            /* width: 1024px; */
            width: 100%;
        }
    }

    @media (min-width:717px) and (max-width: 1040px) {
        .width1200-adj {
            width: 100%;
        }
    }

    @media screen and (max-width: 716px) {
        .width1200-adj {
            width: 100%;
        }
    }
    .img {
        width: 100%;
    }
    .topRelative{
        position: relative;
    }
    #TOPPIC{
        height: 1700px;
        /* background-color: blanchedalmond; */
    }
    .TOPPICtop1{
        /*這裡的寬度會被js改變*/
        width: 467px;
        position: absolute;
        top: 108px;
        left: 732px;
        z-index: 21;
    }
    .TOPPICyoung{
        /*這裡的寬度會被js改變*/
        width:631px;
        position: absolute;
        top:320px;
        left:0px;
        z-index: 21;
    }
    .TOPPIColder{
        width:829px;
        position: absolute;
        top:534px;
        /* right:0px; */
        left:1088px;
        z-index: 21;
    }
    .TOPPICcouple{
        width: 373px;
        position: absolute;
        top: 520px;
        left: 526px;
        z-index: 21;
    }
    .TOPPICgirl{
        width: 150px;
        position: absolute;
        top: 520px;
        /* right: 490px; */
        left:958px;
        z-index: 21;
    }
    .TOPPICflowerfixed{
        width: 100%;
        /* width: 1200px; */
        position: absolute;
        top: 0px;
        left:0px;
        z-index: 26;
    }

    .TOPPICflower, .TOPPICflower2{
        display:none;
        width: 900px;
        position: absolute;
        top: -3000px;
        left:-3000px;
        z-index: 31;
    }
    .TOPPICFlowerAnimation {
        animation-name: myani;
        animation-duration: 9s;
        /* animation-delay: 2s; */
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    .TOPPICFlowerAnimation2 {
        animation-name: myani2;
        animation-duration: 7s;
        /* animation-delay: 2s; */
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }



    @keyframes myani {
        0%   {top:-400px;left: 1200px;transform: rotate(  0deg) scale(1.0,1.0);}
        50%  {top: 400px;left:  300px;transform: rotate( 90deg) scale(1.0,1.0);}
        100% {top: -66px;left: -600px;transform: rotate(270deg) scale(2.0,2.0);}
    }
    @keyframes myani2 {
        0%   {top:-400px;left:  900px;transform: rotate(180deg) scale(0.9,0.9);}
        50%  {top: 400px;left:  100px;transform: rotate(225deg) scale(1.0,1.0);}
        100% {top: 366px;left: -600px;transform: rotate(270deg) scale(1.5,1.5);}
    }
    @media (min-width: 600px) and (max-width: 900px) {
        @keyframes myani {
            0%   {top:-300px;left:  900px;transform: rotate(  0deg) scale(1.0,1.0);}
            50%  {top: 300px;left:  225px;transform: rotate( 90deg) scale(1.0,1.0);}
            100% {top: -50px;left: -450px;transform: rotate(270deg) scale(2.0,2.0);}
        }
        @keyframes myani2 {
            0%   {top:-300px;left:  675px;transform: rotate(180deg) scale(0.9,0.9);}
            50%  {top: 300px;left:   75px;transform: rotate(225deg) scale(1.0,1.0);}
            100% {top: 275px;left: -450px;transform: rotate(270deg) scale(1.5,1.5);}
        }
    }
    @media (min-width: 300px) and (max-width: 599px) {
        @keyframes myani {
            0%   {top:-200px;left:  600px;transform: rotate(  0deg) scale(1.0,1.0);}
            50%  {top: 200px;left:  150px;transform: rotate( 90deg) scale(1.0,1.0);}
            100% {top: -33px;left: -300px;transform: rotate(270deg) scale(2.0,2.0);}
        }
        @keyframes myani2 {
            0%   {top:-200px;left:  450px;transform: rotate(180deg) scale(0.9,0.9);}
            50%  {top: 200px;left:   50px;transform: rotate(225deg) scale(1.0,1.0);}
            100% {top: 133px;left: -300px;transform: rotate(270deg) scale(1.5,1.5);}
        }
    } 





    #emailto{
        text-decoration: none;
        color:deepskyblue;
        text-indent: -1.7em;
        padding-left: 2em;
    }
    @media screen and (max-width: 777px) {
        #emailto{
            font-size: 0.75em;
        }
    }

    .thoughtBOX{
        padding-top: 3em;
    }
    .tinyword{
        color:#2765b8;
        font-weight: 700;
    }
    .underLineblack{
        text-decoration: underline black;
    }
    .thought{
        font-family: 'Noto Serif TC', serif;
        text-align: center;
        color: black;
        font-size: 1.9em;
        letter-spacing: 0.125em;
        font-weight: 500;
        width: 800px;
        line-height: 1.75em;
        margin: 0em auto 0em auto;
        z-index: 1;
    }    
    @media screen and (max-width: 1600px) {
        .thought {
            font-size: 1.45em;
            letter-spacing: 0.125em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 1em 0 1em;
            margin: 0em auto 0em auto;
            width:800px;
        }
    }
    @media screen and (max-width: 1200px) {
        .thought {
            font-size: 1.25em;
            letter-spacing: 0.125em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 1em 0 1em;
            margin: 0em auto 0em auto;
            width:800px;
        }
    }
    @media screen and (max-width: 777px) {
        .thought {
            font-size: 1.15em;
            letter-spacing: 0.05em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 1em 0 1em;
            margin: 0em auto 0em auto;
            width:540px;
        }
    }

    @media screen and (max-width: 688px) {
        .thought {
            font-size: 1.05em;
            letter-spacing: 0em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 0em 0 0em;
            margin: 0em auto 0em auto;
            width: 428px;
        }
    }
    @media screen and (max-width: 488px) {
        .thought {
            font-size: 1.05em;
            letter-spacing: 0em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 0em 0 0em;
            margin: 0em auto 0em auto;
            width: 300px;
            text-align: center;
        }
    }


    .origin{
        background-color: #cdeaf0;
        font-family: 'Noto Serif TC', serif;
        font-size: 1.60em;
        letter-spacing: 0.1em;
        line-height: 2em;
        font-weight: 500;
        width: 1230px;
        padding: 3em 3em;
        margin: 0 auto 15.5em auto;
        /* display: inline-block; */
        text-align: justify;
        /* text-align-last: justify;*/
        position: relative;
        z-index: 1;
    }
    .originIndentText{
        text-indent: -1.7em;
        padding-left: 4em;
    }
    .originIndentText2{
        text-indent: -1.7em;
        padding-left: 5.6em;
    }    
    .originIndentText3{
        text-indent: 0em;
        padding-left: 2.2em;
    }
    .originIndentText4{
        text-indent: 1.1em;
        margin-bottom: 1em;
    }
    .originTitle{
        width: 285px;
        height: 70px;
        background-color: #5fcde4;
        opacity: 0.75;
        position: absolute;
        top: -35px;
        left: 3em;
        z-index: 5;
    }
    .shadow {
        -webkit-box-shadow: 5px 5px 3px 0px #555;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
        -moz-box-shadow:    5px 5px 3px 0px #555;  /* Firefox 3.5 - 3.6 */
        box-shadow: 5px 5px 3px 0px #555;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    }
    .originTitleText{
        font-family: 'Noto Serif TC', serif;
        font-size: 1.6em;
        letter-spacing: 0.25em;
        line-height: 70px;
        font-weight: 500;
        text-align: center;
        color: #000000;
        opacity: 1;
        z-index: 5;
    }
    .silence_create_space{
        margin-bottom: 0em;
    }

    .howtoBoxColor {
        background-color: #f2e69c;
    }
    .howtoTitleColor {
        background-color: #ead663;
    }
    .originDown{
        margin: 0 auto 2em auto;
    }
    @media screen and (max-width: 1388px) {
        .silence_create_space{
            margin-bottom: 7em;
        }
    }
    @media screen and (max-width: 1230px) {
        .origin {
            font-size: 1.20em;
            letter-spacing: 0.1em;
            line-height: 2em;
            font-weight: 500;
            width: 788px;
            padding: 3em 2em;
            margin: 0 auto 18em auto;
        }
        .originTitle{
            width:172px;
            height:42px;
            background-color: #5fcde4;
            position: absolute;
            top: -18px;
            left:3em;
        }
        .originTitleText{
            font-size: 1.25em;
            letter-spacing: 0.25em;
            line-height: 42px;
            font-weight: 500;
            text-align: center;
            color: #000000;
        }
        .howtoTitleColor {
            background-color: #ead663;
        }    
        .originDown{
            margin: 0 auto 2em auto;
        }
        .silence_create_space{
            margin-bottom: 0em;
        }
    }
    @media screen and (max-width: 788px) {
        .origin {
            width: 100%;
        }  
        .originDown{
            margin: 0 auto 2em auto;
        }
    }
    @media screen and (max-width: 600px) {
        .silence_create_space{
            margin-bottom: -3.8em;
        }  
        .originDown{
            margin: 0 auto 2em auto;
        }
    }
    @media screen and (max-width: 480px) {
        .silence_create_space{
            margin-bottom: -5.8em;
        }  
        .originDown{
            margin: 0 auto 2em auto;
        }
    }
    @media screen and (max-width: 420px) {
        .silence_create_space{
            margin-bottom: -10.8em;
        }  
        .originDown{
            margin: 0 auto 2em auto;
        }
    }







    .TH_silence{
        /* display: none; */
        width: 669px;
        position: absolute;
        top: -426px;
        left: 0px;
        z-index: 21;
    }
    .TH_create{
        /* display: none; */
        width: 1056px;
        position: absolute;
        top: -356px;
        right: 0px;
        /* left: 600px; */
        z-index: 21;
    }
    .TH_import{
        /* display: none; */
        width: 787px;
        position: absolute;
        top: -168px;
        right: 0px;
        /* left: 702px; */
        z-index: 21;
    }















    .formspace{
        margin: 106px auto 106px auto;
        width:100%;
        text-align: center;
    }
    #submit{
        cursor: pointer;
        width:650px;
    }
    @media screen and (max-width: 777px) {
        .formspace{
            margin: 0px auto 30px auto;
        }
        /* #submit{
            width: 36%;
        } */
    }




    .LINEnoDOWNLOAD{
        display:none;
        font-family: 'Noto Serif TC', serif;
        text-align: center;
        color: #555;
        font-size: 1.0em;
        letter-spacing: 0.125em;
        font-weight: 500;
        width: 800px;
        line-height: 1.75em;
        margin: 0em auto 0em auto;
        z-index: 1;
    }    
    .LINEtext{
        font-family: sans-serif;
        color: white;
        background: #00b400;
        border-radius: 5px;
        font-size: 1.0em;
        display: inline-block;
    }
    @media screen and (max-width: 1600px) {
        .LINEnoDOWNLOAD {
            font-size: 1em;
            letter-spacing: 0.125em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 1em 0 1em;
            margin: 0em auto 0em auto;
            width:800px;
        }
    }
    @media screen and (max-width: 1200px) {
        .LINEnoDOWNLOAD {
            font-size: 1em;
            letter-spacing: 0.125em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 1em 0 1em;
            margin: 0em auto 0em auto;
            width:800px;
        }
    }
    @media screen and (max-width: 777px) {
        .LINEnoDOWNLOAD {
            font-size: 0.8em;
            letter-spacing: 0.05em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 1em 0 1em;
            margin: 0em auto 0em auto;
            width:540px;
        }    
        .LINEtext{
            font-size: 0.8em;
        }
    }

    @media screen and (max-width: 688px) {
        .LINEnoDOWNLOAD {
            font-size: 0.8em;
            letter-spacing: 0em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 0em 0 0em;
            margin: 0em auto 0em auto;
            width: 428px;
        }
        .LINEtext{
            font-size: 0.8em;
        }
    }
    @media screen and (max-width: 488px) {
        .LINEnoDOWNLOAD {
            font-size: 0.8em;
            letter-spacing: 0em;
            font-weight: 500;
            line-height: 1.75em;
            padding: 0 0em 0 0em;
            margin: 0em auto 0em auto;
            width: 300px;
            text-align: center;
        }
        .LINEtext{
            font-size: 0.8em;
        }
    }






















    .footer{
        background-color: #88e1ff;
        height: 328px;    
        padding-top:70px;
        display: flex;
        flex-direction: row;
        justify-content:  center;
        align-items: flex-start;
        margin-bottom: 8.8em;
    }
    
    .footerLeft{
        flex:0 0 580px;
        order:0;
        margin-top: -2em;
    }
    
    .footerRight{
        flex:0 0 580px;
        order:1;  
        padding-left:96px;
    }
    .footerRightTxtA{
        font-family: 'Noto Serif TC', serif;
        font-size: 2.05em;
        letter-spacing: 0.15em;
        line-height: 1;
        font-weight: 700;
        text-align: left;
        color: #000000;
        opacity: 1;  
    }

    .footerRightTxtB{
        font-family: 'Noto Serif TC', serif;
        font-size: 1.65em;
        letter-spacing: 0.15em;
        line-height: 2.75;
        font-weight: 700;
        text-align: left;
        color: #000000;
        opacity: 1;  
    }


    .footerTxt{
        font-family: 'Noto Serif TC', serif;
        font-size: 2.05em;
        letter-spacing: 0.15em;
        line-height: 42px;
        font-weight: 700;
        text-align: center;
        color: #000000;
        opacity: 1;    
        margin: 0.5em auto;
    }
    .footerDJY{
        text-align: center;
    }

    .footerPic{
        width:296px;
    }
    .spanBackground1{
        background: linear-gradient(0deg, #eab17a 0%, #eab17a 58%, #f2e69c 58%, #f2e69c 100%);
    }
    .spanBackground2{
        background: linear-gradient(0deg, #eab17a 0%, #eab17a 58%, #ffffff 58%, #ffffff 100%);
    }
    @media screen and (max-width: 1230px) {
        .footer{
            height: 248px;  
        }
        .footerRightTxtA{
            font-size: 1.35em;
            letter-spacing: 0.05em;
            line-height: 1;
            font-weight: 700;
            text-align: center;
        }
    
        .footerRightTxtB{
            font-size: 1.05em;
            letter-spacing: 0.05em;
            line-height: 2.75;
            font-weight: 700;
            text-align: center;
        }
        .footerTxt{
            font-size: 1.35em;
        }
        .footerPic{
            width:185px;
        }
        .footerLeft{
            flex:0 0 468px;
        }
        .footerRight{
            flex:0 0 468px;
            padding-left:16px;
        }
    }
    @media screen and (max-width: 777px) {
        .footer{
            height: unset;   
            display: flex;
            flex-wrap: wrap;
        }
        .footerLeft{
            flex:0 0 100%;
            order:2;
            margin-top: -0em;
        }
        .footerRight{
            flex:0 0 100%;
            order:1;  
            padding-left:unset;
        }
        .footerRightTxtA{
            font-size: 1.35em;
            letter-spacing: 0.05em;
            line-height: 1;
            font-weight: 700;
            text-align: center;
        }
    
        .footerRightTxtB{
            font-size: 1.05em;
            letter-spacing: 0.05em;
            line-height: 2.75;
            font-weight: 700;
            text-align: center;
        }
        .footerDJY{
            text-align: center;
            padding-bottom: 25px;
        }
    }

    @media screen and (max-width: 414px) {
        .footerRightTxtA{
            font-size: 1.15em;
            letter-spacing: 0.00em;
        }
        .footerRightTxtB{
            font-size: 1.05em;
            letter-spacing: 0.00em;
        }
        .footerLeft{
            margin-top: -0em;
        }
    }



/*show & hide in screen width 488px*/
.showbox488 {
    display: block;
}
.hidebox488 {
    display: none ;
}
@media screen and (max-width: 488px) {
    .showbox488 {
        display: none;
    }
    .hidebox488 {
        display: block;
    }
}



.originfootermargin{
    margin: 0 auto 8em auto;
}

p.articleTitleBlue{
    color: blue;
}

p.articleTitleBig{
    font-weight: bolder;    
    margin-top: 1em;
    font-size: 1.4em;
}
p.articleTitle{
    font-weight: bolder;    
    margin: 1em auto;
    font-size: larger;
}