@charset "utf-8";

/*----螢幕寬度小於1485px時----*/
/*---------------------------*/
@media screen and (max-width: 1486px){
    .btnTop-Wrap{right: 52px;}
}


/*----螢幕寬度小於於1270px時----*/
/*----------------------------*/
@media screen and (max-width: 1270px){
    .section-btnTop{bottom: 17%;}
}


/*----螢幕寬度小於於1235px時----*/
/*----------------------------*/
@media screen and (max-width: 1235px){
    .rightBN-wrap{
        left: initial;
        transform: initial;
        right: -46px;}
}


/*----螢幕寬度小於於1170px時----*/
/*---------------------------*/
@media screen and (max-width: 1170px){
    .missionCombo{
        width: 80%;
        padding: 0 2%;}

    .combo-alung{
        display: block;
        position: relative;}

    .combo-gift{
        display: block;
        position: relative;
        right: initial;
        bottom: initial;}
}


/*----螢幕寬度小於於1000px時----*/
/*---------------------------*/
@media screen and (max-width: 1000px){
    h2{
        display: inline-block;
        width: 80%;
        padding: 20px;
        border-radius: 30px;
        line-height: 40px;
        background: #fff;}

    h2 > a.m2-mark{
        margin: initial;
        padding: initial;
        background: initial;}

    .mission-wrap{background-size: contain;}
    .missionBg-head,
    .missionBg-bottom{width: 95%;}

    .mission > div{
        flex: initial;
        margin-bottom: 40px;}

    .mission > div:last-child{margin-bottom: 0;}
}


/*----螢幕寬度小於於820px時----*/
/*---------------------------*/
@media screen and (max-width: 820px){
    /*-- 選單 --*/
    .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: #e63434;
        width: 100%;
        height: auto;
        bottom: 0;
        left: 0;
        z-index: 1;}

    .navi-warp ul {
        margin: 0 auto;
        padding: 10px 4px;}
        
    .navi-warp ul li{
        flex: 1;
        border: 2px transparent solid;
        font-size: 15px;
        padding: 5px 15px;
        border-radius: 0px;
        border-left: 1px solid;}

    .navi-warp ul li:nth-of-type(1){
        border-left: transparent 1px solid;}

    .navi-warp ul li:hover, .navi-warp ul li:active{
        border: 2px dashed #ffcb5b;
        color: #fff}

    .navi-warp ul li:hover a,
    .navi-warp ul li:active a{color: #fff;} 
    .navi-warp ul li span::before{font-weight: 400;}

    /*footer*/
    footer{margin-bottom: 55px;}
}


/*----螢幕寬度小於於800px時----*/
/*---------------------------*/
@media screen and (max-width: 800px){
    .theme-wrap .theme .theme-bg{display: none;}
    .theme-wrap .theme .theme-bgm{display: inline-block;}

    h1{ font-size: 28px;}
    h2{ font-size: 24px;
        margin: 60px 20px 0px;}
        
    .rightBN-wrap {top: -140px;}
    .rightBN-wrap a{width: 100px;}
    .rightBN-wrap > a > img{
        width: 100%;}    

}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){
    .mission-wrap{padding: 10px 2% 60px;}
    .mission.m2{ margin-top: 0;}
    .mission.m2 > div {margin-bottom: 0;}

    .digiServise-wrap .digiServise{
        flex-direction: column;
        padding: 0 2%;
        margin: 20px 0 0;}

    .digiServise-wrap .digiServise a{
        max-width: 260px;
        margin: 0 auto;
        margin-bottom: 15px;}

    .missionMap1{display: none;}
    .missionMap2{display: inline-block;}

    #btn-popUp2-1{display: none;}
    #btn-popUp2-2{display: inline-block;}

    .btn-join {
        margin-right: 20%;
        width: 70%;}

    .btn-wrap{padding: 0 20px;}

    /*footer*/
    footer {
        text-align: left;
        margin-bottom: 55px;}

    footer .announce{text-align: left;} 
}



/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media screen and (max-width: 500px){
    .m-title{width: 30%;}
    .theme-date {
        width: 17%;
        left: 2%;}
}


/*----螢幕寬度小於於465px時----*/
/*--------------------------*/
@media screen and (max-width: 465px){
    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}
    .deco-tips-wrap > span.deco-tips5{ bottom: 40%;}
}


/*----螢幕寬度小於於444px時----*/
/*--------------------------*/
@media screen and (max-width: 444px){
    /* 選單 */
    .navi-warp ul li{
        font-size: 16px;}

    /*footer*/
    footer{margin-bottom: 84px;}
}


/*----螢幕寬度小於於427px時----*/
/*--------------------------*/
@media screen and (max-width: 427px){
    .navi-warp ul li{
        padding: 10px 12px;
        line-height: 20px;}
}


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media screen and (max-width: 375px){
    footer{margin-bottom: 74px;}
    .navi-warp ul li{padding: 6px;}
    #rule1 > h3{font-size: 16px;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    h1 {font-size: 22px;}
    .mission > div { margin-bottom: 60px;}
    .mission.m2 > div{ margin-bottom: 0;}
    .rightBN-wrap {top: -110px;}
    .rightBN-wrap a{width: 80px;}
    .navi-warp ul li{padding: 5px 2px;}
    .section-btnTop{bottom: 25%;}
}