/* this is my custom CSS */
    
    @charset "UTF-8";
    /* CSS Document */
    /************************************* all *************************************/
    
    body {
        color: #555;
        font-size: 15px;
        font-family: "微軟正黑體", sans-serif;
        text-align: center;
        line-height: 1.5;
        background-color: #eee;
    }
    h1,
    h2,
    h3,
    h4,
    h5 {
        color: #f4436e;
        line-height: 1.3;
        font-weight: normal;
    }
    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 21px;
    }
    .img100 {
        width: 100%;
    }
    a,
    a:active,
    a:focus {
        color: #fff;
        outline: 0;
    }
    a:hover {
        color: #fff;
        text-decoration: underline;
    }
    .mybtn,
    a .mybtn {
        cursor: pointer;
        display: inline-block;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 100px;
        line-height: 40px;
        background-color: #fff;
        color: #666;
    }
    .mybtn:hover,
    a:hover .mybtn {
        text-decoration: underline;
    }
    .btn,
    a .btn {
        background-color: #fff;
        border-radius: 99px;
        color: #f4436e;
    }
    /************************************* index *************************************/
    
    .banner img {
        width: 100%;
        height: auto;
    }
    .index .left_arrow,
    .index .right_arrow {
        width: 50px;
        height: auto;
    }
    .index .left_arrow {
        position: absolute;
        top: 50%;
        margin-top: -25px;
        left: 15px;
    }
    .index .right_arrow {
        position: absolute;
        top: 50%;
        margin-top: -25px;
        right: 15px;
    }
    /* 移除左右箭頭下面的預設陰影*/
    
    #banner_change .carousel-control.left,
    #banner_change .carousel-control.right {
        background-image: none
    }
    /************************************* 燈箱 *************************************/
    
    .modal-dialog .modal-content h2:first-child {
        margin-top: 0px;
    }
    .modal-dialog {
        text-align: left;
        margin-top: 80px;
    }
    .myclose {
        width: 51px;
        height: auto;
        z-index: 1000;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 15px;
    }
    #pop_up_nav {
        text-align: center;
    }
    #pop_up_nav .modal-dialog {
        text-align: center;
    }
    #pop_up_nav .modal-dialog .modal-content .modal-body a {
        font-size: 30px;
        margin: 15px 0;
        display: block;
        color: #f4436e;
    }
    #pop_up_nav .modal-dialog .modal-content .modal-body .fb {
        width: 50px;
        height: auto;
    }
    /************************************* nav *************************************/
    
    .nav {
        background-color: #f4436e;
        height: 70px;
        position: fixed;
        z-index: 1;
        width: 100%;
        text-align: left;
    }
    .nav .logo {
        width: 85px;
        height: auto;
        position: absolute;
        left: 15px;
        top: 0px;
    }
    .nav .nav_trigger {
        width: 30px;
        height: auto;
        position: absolute;
        right: 15px;
        top: 20px;
    }
    /************************************* index *************************************/
    
    .index {
        padding-top: 70px;
        position: relative;
    }
    .index .index_bg {
        width: 100%;
    }
    .index .ad {
        position: absolute;
        left: 15px;
        bottom: 15px;
    }
    .index .ad img {
        display: none;
        width: 210px;
        height: auto;
    }
    /************************************* activities *************************************/
    
    .activities {
        background-color: #f5b2b3;
        background-image: url(../img/activities/bg.jpg);
        background-repeat: repeat-x;
        text-align: left;
        padding-bottom: 15px;
    }
    /************************************* login *************************************/
    
    .login {
        background-color: #f4436e;
        background-image: url(../img/login/bg.jpg);
        background-repeat: repeat-x;
        color: #fff;
        text-align: left;
        padding-bottom: 15px;
    }
    .login h2,
    .login h3,
    .login h4,
    .login h5 {
        color: #fff;
    }
    .invoice_img {
        margin-bottom: 15px;
        max-width: 100%;
    }
    /************************************* q_a *************************************/
    
    .q_a {
        background-color: #f4436e;
        background-image: url(../img/login/bg.jpg);
        background-repeat: repeat-x;
        color: #fff;
        text-align: left;
        padding-bottom: 15px;
    }
    .q_a h2,
    .q_a h3,
    .q_a h4,
    .q_a h5 {
        color: #fff;
    }
    .q_a .one_q_a {
        background: #fff;
        text-align: center;
        margin-bottom: 15px;
        color: #f4436e;
    }
    .q_a .one_q_a:hover {
        filter: brightness(110%);
    }
    .q_a .one_q_a p {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /************************************* q_a_right *************************************/
    
    #q_a_right img {
        margin-bottom: 15px;
    }
    #q_a_right .mybtn,
    #q_a_right a .mybtn {
        background-color: #f4436e;
        color: #fff;
        margin-bottom: 15px;
    }
    #q_a_right .mybtn.fb {
        background-color: #4b67ad;
    }
    /************************************* unpacking_and_eating *************************************/
    
    .unpacking_and_eating {
        background-color: #f5b2b3;
        background-image: url(../img/winner/bg.jpg);
        background-repeat: repeat-x;
        text-align: left;
        padding-bottom: 15px;
    }
    .unpacking_and_eating .one_eating {
        background-color: #fff;
        border: 1px solid #f4436e;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 15px;
    }
    .unpacking_and_eating .one_eating img {
        margin-bottom: 15px;
    }
    .unpacking_and_eating a .one_eating h4 {
        margin: 0px;
        margin-bottom: 5px;
    }
    .unpacking_and_eating .one_eating p {
        margin: 0px;
        color: #666;
    }
    .unpacking_and_eating .page_control {
        margin: 15px auto;
    }
    .unpacking_and_eating .page_control a {
        font-size: 18px;
        color: #f4436e;
        margin: 0 10px;
    }
    /************************************* q_a_write_personal_data *************************************/
    
    #q_a_write_personal_data a {
        color: #f4436e;
    }
    #q_a_write_personal_data .mybtn,
    #q_a_write_personal_data a .mybtn {
        background-color: #f4436e;
        color: #fff;
        margin-bottom: 15px;
    }
    /************************************* winner *************************************/
    
    .winner {
        background-color: #f5b2b3;
        background-image: url(../img/winner/bg.jpg);
        background-repeat: repeat-x;
        text-align: left;
        padding-bottom: 15px;
    }
    /************************************* video *************************************/
    
    .video {
        border-top: 1px solid #fff;
        background-color: #f4436e;
        color: #fff;
        background-repeat: repeat-x;
        text-align: left;
        padding-bottom: 15px;
    }
    .video h2 {
        color: #fff;
    }
    .video .mybtn {
        margin-bottom: 15px;
        margin-right: 5px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .video .mybtn.focus {
        color: #f4436e;
    }
    /************************************* footer *************************************/
    
    .footer {
        background-color: #fff;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .footer span {
        margin-right: 15px;
    }
    .footer p {
        margin: 0px;
    }
    .footer a {
        color: #f4436e;
    }