@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.headerRwdContainer { display: none; }
.rwdMenuContainer { height: 100px; width: 100%; background: linear-gradient(#fff 20%, #90cfe3); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); padding: 0 5px; position: fixed; top: 0; z-index: 150; }
.rwdMenuIcon { color: #33a5c8; text-align: center; cursor: pointer; line-height: 100px; }
.rwdMenuLogo { vertical-align: middle; margin: 3px auto 0; }
.rwdMenuLogo>a>img { width: 230px; }
.rwdHeaderNavContainerBg { position: fixed; top: 0; bottom: 0; padding-top: 100px; width: 100%; background: rgba(255, 255, 255, 0.5); z-index: 149; }
.rwdHeaderNavContainer { position: absolute; top: 0; bottom: 0; width: 300px;    /*background: rgba(28, 150, 188, 0.9);*/ background: rgba(255, 255, 255, 1); z-index: 50; padding: 100px 0 0 0; overflow-x: hidden; overflow-y: scroll; }
.rwdHeaderCardContainer { position: relative; }
.rwdHeaderCardImg { }
.rwdHeaderCardName { position: absolute; bottom: 53px; left: 15px; font: normal 20px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #555; }
.rwdHeaderCardMemberStatus { width: 75px; border: solid 1px #faaf05; border-radius: 10px; font: normal 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; position: absolute; bottom: 85px; left: 15px; color: #faaf05; background: none; line-height: 18px; text-align: center; }
.rwdHeaderCardBtnContainer { position: absolute; width: 100%; bottom: 15px; }
.rwdHeaderCardBtnContainer .btnCustom { border-radius: 12.5px; font: normal 14px 'Century Gothic', '微軟正黑體'; height: 25px; padding: 0; line-height: 23px; background: #33a5c8; color: #fff; }
.rwdHeaderCardBtnContainer i { font-size: 14px; display: inline-block; margin-right: 2px; }
.rwdHeaderCardIcon { position: absolute; top: 5px; right: 5px; font-size: 22px; }
.rwdHeaderCardIcon a { color: #777; }
.rwdHeaderNav { font: normal 28px 'Marcellus SC', '微軟正黑體'; line-height: 26px; letter-spacing: 1px; text-align: left; }
.rwdHeaderNav>ul { position: relative; margin: 0 20px; }
.rwdHeaderNav>ul>li { padding: 15px 0; border-bottom: solid 1px rgba(150, 150, 150, 0.2); }
.rwdHeaderNav>ul>li>a { color: #666; }
.rwdHeaderNav>ul>li>a>span { margin-top: 1px; display: block; font-size: 16px; opacity: 0.8; letter-spacing: 2px; }
.rwdHeaderNav ul>li>a:hover { text-decoration: none; }
.rwdSideNavSecTitle>span>.fa-angle-right { transition: all 0.4s; }
.rwdSideNavSecLayer { }
.rwdSideNavSecLayer>ul>li { padding: 10px 0 0; font-weight: normal; }
.rwdSideNavSecLayer>ul>li>a { color: #cff3ff; padding: 0 0 0 15px; }
.rwdSideNavThirdLayer { padding-left: 30px; }
.rwdSideNavThirdLayer>ul>li { padding: 8px 0 0; font: normal 18px 'Century Gothic', '微軟正黑體'; }
.rwdSideNavThirdLayer>ul>li>a { color: #608e2e; }
.rwdSideNavFourthLayer { padding-left: 20px; }
.rwdSideNavFourthLayer>ul>li { padding: 5px 0 0; font: normal 16px 'Century Gothic', '微軟正黑體'; }
.rwdSideNavFourthLayer>ul>li>a { color: #444; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_footer.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.footerRwd{
    position: absolute; bottom: 0;width: 100%; padding: 15px 0;
    background: #90cfe3;
    color: #024e69;
}
.footerRwd .footerCopyright{
    height: auto;
    border-top: none;
    margin: 0;
    line-height: 20px;
    color: #024e69;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.phoneMenu { width: 100%; height: 50px; background: rgba(212, 243, 255, 1); position: fixed; bottom: 0; z-index: 30; display: none; }
.phoneMenuBox { text-align: center; padding: 5px 0; }
.phoneMenuBox a { color: #33a5c8; }
.phoneMenuBox a:hover { text-decoration: none; }
.phoneMenuBox i { font-size: 20px; line-height: 25px; }
.phoneMenuIndex { position: relative; top: -12px }
.phoneMenuIndex::after { content: ''; width: 80px; height: 80px; background: rgba(212, 243, 255, 1); position: absolute; top: -20px; transform: translateX(-50%); left: 50%; z-index: -1; border-radius: 50%; }
.phoneMenuIndex img { width: 60px; }
.phoneMenuTitle { font: normal 12px 'Century Gothic', '微軟正黑體'; line-height: 16px; letter-spacing: 2px; }
.phoneMenuCartTitle { }
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>><<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> RWD<<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1250px) {
    .headerIndexLogo{left: 0;}
}

@media screen and (max-width:1199px) {
    /*.indexAboutContentContainer { width: 65%;}
    .indexAboutContent {-webkit-line-clamp: 8; }
    .indexAboutImg { width: 380px;  bottom: -50px;}*/
    .indexAboutNewsContainer { position: relative; max-width: 100%; padding-right: 0px; padding-left: 0px; }
    .indexAboutContentContainer { width: 85%; margin-left: auto; margin-right: auto;}
    .indexNewsContainer{
        position: relative;
        width: 100%;
        box-shadow: none;
    }
}

@media screen and (max-width:1100px) {}

@media screen and (max-width:1000px) {}

@media screen and (max-width:991px) {
    body {
        margin-top: 100px;
        margin-bottom: 60px;
    }
    /*.indexAboutContainer { padding-bottom: 50px; }
    .indexAboutContentContainer { width: 100%;}
    .indexAboutImg {display: none}*/
    .aboutContainer .container,
    .privacyContainer .container,
    .newsContainer .container,
    .newsContainer .container,
    .activityDetailContainer .container,
    .linkContainer .container,
    .applyInformationFillFormContainer .container,
    .applyInfoCheckContainer .container,
    .memberLoginContainer .container,
    .memberInfoContainer .container,
    .memberOrder .container,
    .orderDetail .container,
    .orderDetail .container,
    .orderDetail .container,
    .contactContainer .container
    {
        padding-left: 15px;
        padding-right: 15px;
    }
    .indexAboutContentContainer { width: 100%;}
    .indexActivityContainer { padding-bottom: 0px; }
    .activityDetailBtnContainer{
        margin-bottom:  50px;
    }
    .applyTopContent{
        padding: 20px 10px;
    }
    .applyTopPrice {
        padding-right: 0;
    }
    .applyTopStatus { top: auto; bottom:80px; }
    .memberCenterBtn { bottom: 60px; right: 10px; opacity: 1; }

}

@media screen and (max-width:950px) {}

@media screen and (max-width:900px) {}

@media screen and (max-width:800px) {}

@media screen and (max-width:767px) {
    
    .indexAboutNewsContainer{
        margin-top: 30px;
        padding-bottom: 0px;
    }
    .indexAboutContentContainer{
        margin-bottom: 30px;
    }
    .indexNewsContainer{
        top: 0;
    }
    .indexActivityContainer{
        margin-top: 30px;
        padding-top: 0px;
    }
    .activityDetailInfomationContent{
        display: inline-block;
        width: 100%;
        padding-left: 28px;
    }
    .applyInfoCheckParticipantInfoBoxRow .applyInfoCheckParticipantInfoBoxCol:nth-child(2n+2) .applyInfoCheckParticipantInfoBox{
        background: #f3f3f3;
    }
    .contactInfoContainer{
        width: 100%;
        top: 0;
        margin-top: 30px;
        margin-bottom: 30px;
    }

} 

@media screen and (max-width:575px) {
    .indexAboutBtn { width: 200px;}
    .indexNewsBoxTitle {
        width: calc(100% - 40px);
        margin: 10px 0px 15px 40px;
    }

    .indexNewsType {
        right: -5px;
        top: auto;
        bottom: -5px;
    }
    .indexNewsContent {
        margin-bottom: 20px;
    }
    .activityDetailBreadcrumb{
        top: 0;
        margin-bottom: 20px;
        background: none;
        padding: 3px 15px 3px 0px;

    }
    .applyTopContent{
        padding-bottom: 10px;
    }
    .applyTopPrice{
        padding-top: 10px;
        text-align: left;
    }
    .applyTopStatus { bottom:20px; }
    .contactInfoContent{
        display: block;
    }
    .contactArriveContainer{
        padding: 10px 20px 15px;
    }


}

@media screen and (max-width:500px) {}

@media screen and (max-width:480px) {}

@media screen and (max-width:450px) {


    
}

@media screen and (max-width:400px) {
 .applyBreadcrumbBox { font: bold 17px 'Century Gothic', '微軟正黑體'; line-height: 45px;}   
}
@media screen and (max-width:360px) {

}