/*
 body {
            background-color: #FFF;
            background-image: url('../img/BodyBG.png');
            background-repeat: repeat-y;
            overflow-x: hidden;
            font-family: Arial, 'LiHei Pro', 'Noto Sans TC', 'Microsoft JhengHei', 'Apple LiGothic Medium', '\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4', '\534E\6587\7EC6\9ED1', '\65B0\7EC6\660E\4F53' !important;
            font-size: 14px;
            color: #000D29;
        }
*/

        a {
            text-decoration: none!important;
        }

        #clear {
            clear: both;
        }

        .MB-none {
            display: block;
        }

        .PC-none {
            display: none;
        }

        .animated_a_img,
        .animated_a {
            transition: all .2s ease;
            -webkit-transition: all.2s ease;
            -moz-transition: all .2s ease;
            -ms-transition: all .2s ease;
            -o-transition: all .2s ease;
        }

        @media screen and (max-width:1000px) {
            .MB-none {
                display: none;
            }
            .PC-none {
                display: block;
            }
        }

        #FirstArea {
            width: 100vw;
            height: 580px;
            position: relative;
            display: block;
            overflow-y: hidden;
        }

        #FirstArea img {
            width: 1920px;
            height: auto;
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
        }

        .ff-cont {
            z-index: 1;
            padding-top: 100px;
            padding-left: 15%;
        }

        @media screen and (min-width:1580px) {
            .ff-cont {
                padding-left: 22%;
            }
        }

        @media screen and (max-width:1000px) {
            .ff-cont {
                padding-top: 22px;
                padding-left: 0;
            }
            .MB-margin-auto {
                margin: auto;
            }
            .txt-title {
                display: none;
            }
        }

        h1 {
            font-size: 100px;
            line-height: 1.4em;
            font-weight: 500;
            color: #FFF;
            letter-spacing: 0;
            text-align: center;
            text-shadow: 0px 1px 5px #FFF, 1px 0px 5px #FFF, 0px -1px 5px #FFF, -1px 0px 5px #FFF, 0px 2px 0 #FFF, 2px 0px 0 #FFF, 0px -2px 0 #FFF, -2px 0px 0 #FFF;
            margin-top: 22px;
            margin-bottom: 20px;
        }

        #FirstArea .ff-cont h1 {
            position: relative;
            text-shadow: 0px 1px 5px #FFF, 1px 0px 5px #FFF, 0px -1px 5px #FFF, -1px 0px 5px #FFF, 0px 2px 0 #FFF, 2px 0px 0 #FFF, 0px -2px 0 #FFF, -2px 0px 0 #FFF, rgba(0, 0, 0, 0.2) 2px 6px 5px, rgba(255, 255, 255, 0.4) 0px -4px 30px;
            color: #F54141;
        }

        #FirstArea .ff-cont h1 img {
            width: 500px;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }

        h2 {
            font-size: 38px;
            line-height: 1.2em;
            font-weight: 500;
            color: #bca18d;
            letter-spacing: 0;
            text-align: center;
            text-shadow: 0px 1px 5px #FFF, 1px 0px 5px #FFF, 0px -1px 5px #FFF, -1px 0px 5px #FFF, 0px 2px 0 #FFF, 2px 0px 0 #FFF, 0px -2px 0 #FFF, -2px 0px 0 #FFF;
        }

        h3 {
            font-size: 22px;
            line-height: 1.2em;
            color: #000D29;
            letter-spacing: 0;
            text-align: center;
            margin-bottom: 10px;
        }

        #FirstArea .ff-cont h3 {
            color: #FFF;
            line-height: 37px;
            margin-bottom: 0px;
        }

        #FirstArea .ff-cont h3 span.glint-txt {
            -webkit-animation: glint-text 1.2s 1.2s infinite;
            -ms-animation: glint-text 1.2s 1.2s infinite;
            -o-animation: glint-text 1.2s 1.2s infinite;
            animation: glint-text 1.2s 1.2s infinite;
        }

        .ff-cont h3 span.glint-txt {
            font-size: 48px;
        }

        .txt-title {
            width: 464px;
            position: relative;
            margin: auto;
            padding-top: 15px;
            padding-bottom: 5px;
            -webkit-box-shadow: :0 9px 0 rgba(0, 0, 0, .15);
            box-shadow: :0 9px 0 rgba(0, 0, 0, .15);
            background-color: rgba(188, 161, 141, .7);
            border-radius: 5px;
        }

        .txt-title h3 span {
            font-weight: 600;
        }
        /* keyframes */

        @keyframes glint-text {
            0%,
            50% {
                color: #F54141;
            }
            50.1%,
            100% {
                color: #FFF;
            }
        }

        @keyframes glint-box {
            0%,
            50% {
                border-color: #F4FF4D;
            }
            50.1%,
            100% {
                border-color: #FFF;
            }
        }
        /* keyframes */

        .fs-cont {
            z-index: 1;
            width: 30%;
        }

        #FirstArea .fs-cont img {
            width: 836px;
            height: 552px;
            padding-top: 30px;
            padding-right: 10%;
        }

        @media screen and (min-width:1580px) {
            #FirstArea .fs-cont img {
                padding-right: 20%;
            }
        }

        @media screen and (max-width:1000px) {
            #FirstArea .fs-cont img {
                width: 640px;
                height: auto;
                padding-top: 160px;
                padding-right: 0;
            }
        }

        @media screen and (max-width:640px) {
            #FirstArea {
                height: 375px;
            }
            #FirstArea img {
                width: 1280px;
            }
            #FirstArea .fs-cont img {
                width: 320px;
                padding-top: 165px;
            }
            #FirstArea .ff-cont h2 {
                font-size: 24px;
            }
            #FirstArea .ff-cont h1 {
                font-size: 60px;
            }
        }
        /* FirstArea CSSStyle END*/

        

        

        #ThirdArea {
            width: 100vw;
            position: relative;
            height: auto;
            display: block;
            background-color: #FFF;
        }

        #ThirdArea img {
            width: 100%;
            height: auto;
        }

        .TT-P {
            display: block;
        }

        .TT-M {
            display: none;
            max-width: 340px;
            margin: auto;
        }

        @media screen and (max-width:640px) {
            .TT-P {
                display: none;
            }
            .TT-M {
                display: block;
            }
        }

        #ThirdArea .title {
            background-color: #FFF;
            padding-top: 32px;
            padding-bottom: 30px;
            width: 100%;
            height: auto;
            top: 0;
            left: 0;
            border-bottom: 2px solid #CCC;
        }

        #ThirdArea .title h2,
        #FifthArea .title h2,
        #SeventhArea .title h2 {
            color: #FFF;
            text-shadow: none;
            margin-bottom: 22px;
        }

        #ThirdArea .title h3,
        #FifthArea .title h3,
        #SeventhArea .title h3,
        #EighthArea .title h3 {
            color: #FFF;
            font-size: 32px;
            margin-bottom: 10px;
        }

        #ThirdArea .title h4,
        #FifthArea .title h4,
        #SeventhArea .title h4,
        #EighthArea .title h4 {
            text-align: center;
            font-size: 22px;
        }
        /* ThirdArea CSSStyle END*/

        #FourthArea {
            /* background-color: #FFF; */
            width: 100vw;
            height: auto;
            position: relative;
            margin: auto;
            display: block;
            top: 0;
        }

        .pupu-A {
            position: absolute;
            bottom: 520px;
            left: 310px;
            animation-duration: 2s;
        }

        .pupu-B {
            position: absolute;
            bottom: 295px;
            left: 50px;
            animation-duration: 1.8s;
        }

        .pupu-C {
            position: absolute;
            bottom: 60px;
            left: 15px;
            animation-duration: 2.4s;
        }

        .bottom {
            width: 100%;
            height: auto;
            background-color: rgba(255, 255, 255, .6);
            border-top: 5px solid #dce5f0;
            border-bottom: 2px solid #ccc;
            color: #000D29;
            text-align: left;
            line-height: 1.6em;
            font-size: 18px;
            padding: 20px 0;
        }

        .bottom h4 {
            max-width: 800px;
            width: 90%;
            margin: auto;
        }

        @media screen and (max-width:800px) {
            #FourthArea div img {
                width: 92%;
            }
            .pupu-A {
                bottom: 430px;
                left: 275px;
            }
            .pupu-B {
                bottom: 270px;
                left: 20px;
            }
            .pupu-C {
                bottom: 40px;
                left: 7px;
            }
        }
        /* FourthArea CSSStyle END*/

        #FifthArea {
            width: 100vw;
            height: auto;
            position: relative;
            margin: auto;
            display: block;
            top: 0;

            background-color: #FFF;
            padding-bottom: 37px;
        }

        #FifthArea .title {
            background-color: rgba(188, 161, 141, .8);
            padding-top: 32px;
            padding-bottom: 30px;
            width: 100%;
            height: auto;
            top: 0;
            left: 0;
        }

        .cont-pc {
            display: block;
        }

        .cont-mb {
            display: none;
        }

        .fifth:after {
            content: '';
            position: absolute;
            display: block;
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 0;
            height: 100%;
            background: #FFF;
            z-index: -1;
            -webkit-transition: width 150ms ease-in-out;
            transition: width 150ms ease-in-out;
        }

        .fifth:hover:after {
            width: 110%;
        }

/*
        .btn {
            box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: transparent;
            border: 2px solid #e74c3c;
            border-radius: 0.6em;
            color: #e74c3c;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-item-align: center;
            align-self: center;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1;
            margin: 20px;
            padding: 1.2em 2.8em;
            text-decoration: none;
            text-align: center;
            text-transform: uppercase;
            font-weight: 700;
            font-family: 'Malgun Gothic'!important;
        }
*/

        .fifth {
            border-color: #FFF;
            border-radius: 0;
            color: #FFF;
            position: relative;
            overflow: hidden;
            z-index: 1;
            -webkit-transition: color 150ms ease-in-out;
            transition: color 150ms ease-in-out;
            margin: 20px auto 20px auto;
        }

        .btn:hover,
        .btn:focus {
            color: #FF0026;
            outline: 0;
        }

        .fifth:hover {
            color: #FF0026;
        }
        /* FifthArea CSSStyle END*/

        #SixthArea {
            width: 100vw;
            height: auto;
            position: relative;
            margin: auto;
            display: block;
            top: 0;

            background-color: #FFF;
            padding-bottom: 37px;
        }
        /* SixthArea CSSStyle END*/

        #SeventhArea {
            width: 100vw;
            height: auto;
            position: relative;
            margin: auto;
            display: block;
            top: 0;
            background-image: url('../img/7-BodyBG.png');
            background-repeat: repeat-y;

            /* padding-bottom: 37px; */
        }

        #SeventhArea .title {
            background-color: #00BDA0;
            padding-top: 32px;
            padding-bottom: 30px;
            width: 100%;
            height: auto;
            top: 0;
            left: 0;
        }
        /* SeventhArea CSSStyle END*/

        #EighthArea {
            width: 100vw;
            height: auto;
            position: relative;
            margin: auto;
            display: block;
            top: 0;

            background-color: #F54141;
        }

        #EighthArea .title {
            padding-top: 32px;
            padding-bottom: 30px;
            width: 90%;
            max-width: 1000px;
            height: auto;
            margin: auto;
        }


        @media screen and (max-width:640px) {
/*
            #SecondArea {
                padding-top: 22px;
                padding-bottom: 22px;
            }
*/
            #FourthArea,
            #SeventhArea {
                display: none;
            }
/*
            .cont-pc {
                display: none;
            }
            .cont-mb {
                display: block;
            }
            ul.form-L li input[type="text"],
            ul.form-L li input[type="email"],
            ul.form-L li input[type="tel"] {
                width: 58%;
            }
            ul.form-L li input,
            ul.form-L li select {
                height: 34px;
            }
            select[name="ct2"] {
                margin-left: 3px;
            }
            #EighthArea .title h4 {
                display: none;
            }
            #EighthArea .title .fifth {
                margin: 0px auto 10px auto;
            }
        }
*/