﻿
        #helpmain {
            background: rgba(0,0,0,0.6);
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 9000;
            display:none;
        }

        /* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

        /* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

        .triangle-border {
            position: absolute;
            padding: 15px;
            margin: 1em 0 3em;
            border: 5px solid #0e70a1;
            color: #333;
            background: rgba(255,255,255,0.9);
            /* css3 */
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            font-size: 16px;
        }

            /* Variant : for left positioned triangle
------------------------------------------ */

            .triangle-border.leftU, .triangle-border.leftB {
                margin-left: 30px;
            }

            /* Variant : for right positioned triangle
------------------------------------------ */

            .triangle-border.rightU, .triangle-border.rightB {
                margin-right: 30px;
            }

            /* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

            .triangle-border::before {
                content: "";
                position: absolute;
                bottom: -20px; /* value = - border-top-width - border-bottom-width */
                left: 40px; /* controls horizontal position */
                border-width: 20px 20px 0;
                border-style: solid;
                border-color: #0e70a1 transparent;
                /* reduce the damage in FF3.0 */
                display: block;
                width: 0;
            }

            /* creates the smaller  triangle */
            .triangle-border::after {
                content: "";
                position: absolute;
                bottom: -13px; /* value = - border-top-width - border-bottom-width */
                left: 47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
                border-width: 13px 13px 0;
                border-style: solid;
                border-color: rgba(255,255,255,0.9) transparent;
                /* reduce the damage in FF3.0 */
                display: block;
                width: 0;
            }

            /* Variant : top
------------------------------------------ */

            /* creates the larger triangle */
            .triangle-border.topR::before {
                top: -20px; /* value = - border-top-width - border-bottom-width */
                bottom: auto;
                left: auto;
                right: 40px; /* controls horizontal position */
                border-width: 0 20px 20px;
            }

            /* creates the smaller  triangle */
            .triangle-border.topR::after {
                top: -13px; /* value = - border-top-width - border-bottom-width */
                bottom: auto;
                left: auto;
                right: 47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
                border-width: 0 13px 13px;
            }

            /* creates the larger triangle */
            .triangle-border.topL::before {
                top: -20px; /* value = - border-top-width - border-bottom-width */
                bottom: auto;
                left: 40px;
                right: auto; /* controls horizontal position */
                border-width: 0 20px 20px;
            }

            /* creates the smaller  triangle */
            .triangle-border.topL::after {
                top: -13px; /* value = - border-top-width - border-bottom-width */
                bottom: auto;
                left: 47px;
                right: auto; /* value = (:before right) + (:before border-right) - (:after border-right) */
                border-width: 0 13px 13px;
            }

            /* Variant : left
------------------------------------------ */

            /* creates the larger triangle */
            .triangle-border.leftU::before {
                top: 10px; /* controls vertical position */
                bottom: auto;
                left: -30px; /* value = - border-left-width - border-right-width */
                border-width: 15px 30px 15px 0;
                border-color: transparent #0e70a1;
            }

            /* creates the smaller  triangle */
            .triangle-border.leftU::after {
                top: 16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
                bottom: auto;
                left: -21px; /* value = - border-left-width - border-right-width */
                border-width: 9px 21px 9px 0;
                border-color: transparent rgba(255,255,255,0.9);
            }

            /* creates the larger triangle */
            .triangle-border.leftB::before {
                top: auto; /* controls vertical position */
                bottom: 10px;
                left: -30px; /* value = - border-left-width - border-right-width */
                border-width: 15px 30px 15px 0;
                border-color: transparent #0e70a1;
            }

            /* creates the smaller  triangle */
            .triangle-border.leftB::after {
                top: auto; /* value = (:before top) + (:before border-top) - (:after border-top) */
                bottom: 16px;
                left: -21px; /* value = - border-left-width - border-right-width */
                border-width: 9px 21px 9px 0;
                border-color: transparent rgba(255,255,255,0.9);
            }
            /* Variant : right
------------------------------------------ */

            /* creates the larger triangle */
            .triangle-border.rightU::before {
                top: 10px; /* controls vertical position */
                bottom: auto;
                left: auto;
                right: -30px; /* value = - border-left-width - border-right-width */
                border-width: 15px 0 15px 30px;
                border-color: transparent #0e70a1;
            }

            /* creates the smaller  triangle */
            .triangle-border.rightU::after {
                top: 16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
                bottom: auto;
                left: auto;
                right: -21px; /* value = - border-left-width - border-right-width */
                border-width: 9px 0 9px 21px;
                border-color: transparent rgba(255,255,255,0.9);
            }

            /* creates the larger triangle */
            .triangle-border.rightB::before {
                top: auto; /* controls vertical position */
                bottom: 10px;
                left: auto;
                right: -30px; /* value = - border-left-width - border-right-width */
                border-width: 15px 0 15px 30px;
                border-color: transparent #0e70a1;
            }

            /* creates the smaller  triangle */
            .triangle-border.rightB::after {
                top: auto; /* value = (:before top) + (:before border-top) - (:after border-top) */
                bottom: 16px;
                left: auto;
                right: -21px; /* value = - border-left-width - border-right-width */
                border-width: 9px 0 9px 21px;
                border-color: transparent rgba(255,255,255,0.9);
            }

            .triangle-border iframe{
                border:0px;
            }



        /*-------
before after 背景旋轉變形時，裡面內容文字不跟著旋轉2
--------*/
        .rotate {
            height: 200px;
            width: 200px;
            /*margin: 50px;*/
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

            .rotate div {
                width: 140px;
                height: 50px;
                margin: 60px auto;
                font-size: 14px;
                /*line-height: 50px;*/
                text-align: center;
            }

            .rotate::before {
                content: "";
                height: 200px;
                width: 200px;
                position: absolute;
                z-index: -1;
                border-radius: 50%;
                border: 2px dashed #0e70a1;
                background-color: rgba(255,255,255,0.9);
                /*opacity:0.8;*/
                animation: rotate 40s linear infinite;
            }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0);
            }

            50% {
                -webkit-transform: rotate(180deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0);
            }

            50% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .button_01 {
            border: 1px solid #15aeec;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-size: 14px;
            font-family: arial, helvetica, sans-serif;
            padding: 10px 10px 10px 10px;
            text-decoration: none;
            display: inline-block;
            text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
            font-weight: bold;
            color: #FFFFFF;
            background-color: #49c0f0;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
            background-image: -webkit-linear-gradient(top, #49c0f0, #2CAFE3);
            background-image: -moz-linear-gradient(top, #49c0f0, #2CAFE3);
            background-image: -ms-linear-gradient(top, #49c0f0, #2CAFE3);
            background-image: -o-linear-gradient(top, #49c0f0, #2CAFE3);
            background-image: linear-gradient(to bottom, #49c0f0, #2CAFE3);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#49c0f0, endColorstr=#2CAFE3);
        }

            .button_01:hover {
                border: 1px solid #1090c3;
                background-color: #1ab0ec;
                background-image: -webkit-gradient(linear, left top, left bottom, from(#1ab0ec), to(#1a92c2));
                background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
                background-image: -moz-linear-gradient(top, #1ab0ec, #1a92c2);
                background-image: -ms-linear-gradient(top, #1ab0ec, #1a92c2);
                background-image: -o-linear-gradient(top, #1ab0ec, #1a92c2);
                background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1ab0ec, endColorstr=#1a92c2);
            }
