@charset "utf-8";

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


/*----螢幕寬度小於於1375px時----*/
/*----------------------------*/
@media screen and (max-width: 1375px){
    .deco-ufo{
        width: 15%;
        right: 0;}

    .deco-music{width: 15%;}
    .deco-welcome{
        width: 22%;
        top: 0;}

    .deco-glass{
        width: 18%;
        left: 0;}

    .deco-go{
        width: 18%;
        left: 0;
        bottom: 30%;}

    .theme-alung {
        width: 30%;
        bottom: -26%;}
}


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


/*----螢幕寬度小於於1250px時----*/
/*----------------------------*/
@media screen and (max-width: 1250px){
    .theme-alung{right: 0;}
}


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


/*----螢幕寬度小於於900px時----*/
/*---------------------------*/
@media screen and (max-width: 900px){
    .campaign-2 > div{padding: 5px 0;}
    .campaign-2 > div > div{margin: 5px;}
}


/*----螢幕寬度小於於840px時----*/
/*---------------------------*/
@media screen and (max-width: 840px){
    .campaign-1 > div {
        width: calc(50% - 20px);
        margin: 0 10px;}
}


/*----螢幕寬度小於於820px時----*/
/*---------------------------*/
@media screen and (max-width: 820px){
    /*-- 選單 --*/
    .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: #cb3b70;
        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: 10px 2px;
        border-radius: 10px;}

    .navi-warp ul li:hover, .navi-warp ul li:active{
        border: 2px dotted #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;}

    /*阿龍*/ 
    .theme-alung {width: 36%;}
    /*footer*/
    footer{margin-bottom: 70px;}
}


/*----螢幕寬度小於於800px時----*/
/*---------------------------*/
@media screen and (max-width: 800px){
    .theme-frame{width: 90%;}
    .deco-music{
        right: 0;
        width: 12%;}

    .rightBN-wrap {top: -170px;}
    .rightBN-wrap a{width: 140px;}
    .rightBN-wrap > a > img{
        width: 100%;}        
}


/*----螢幕寬度小於於780px時----*/
/*---------------------------*/
@media screen and (max-width: 780px){
    .deco-glass{
        top: 10%;
        width: 12%;}
}


/*----螢幕寬度小於於730px時----*/
/*---------------------------*/
@media screen and (max-width: 730px){
    .theme-TL2022Q4 > .TL2022Q4{
        width: 80%;
        margin-left: 15%;}

    .deco-go{
        bottom: -5%;
        left: 2%;}
}


/*----螢幕寬度小於於700px時----*/
/*---------------------------*/
@media screen and (max-width: 700px){
    .deco-music{top: 4%;}
}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){

    .deco-glass {
        top: 0;
        width: 14%;}

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

    .theme-alung {right: 2%;}
    .btn-wrap{padding: 0 20px;}

    .campaign-1 > div {
        width: 80%;
        margin:0;
        margin-bottom: 10px;}

    .campaign-1 > div.capm3-pc{display: none;}
    .campaign-1 > div.capm3-mobile{
        display: inline-block;
        width: 90%;}


    .campaign-2 {
        width: 80%;
        padding: 40px 20px 20px;
        margin: 60px 0 40px;}

    .campaign-2 h1{top: -40px;}

    .campaign-2 > div > div{
        flex: initial;
        width: 100%;}

    .campaign-2 > div > div:first-child{
        margin-bottom: 20px;}

    .line-title{width: 90%;}

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

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


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media screen and (max-width: 500px){
    .deco-music{background-position: center;}
    .deco-glass{background-position: center;}
    .campaign-2{margin-top: 20px;}
}


/*----螢幕寬度小於於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%;}
}


/*----螢幕寬度小於於463px時----*/
/*--------------------------*/
@media screen and (max-width: 463px){
    .navi-warp ul li{line-height: 38px;}
    .navi-warp ul li:nth-of-type(3){line-height: 19px;}
}


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

    .campaign{margin: 40px 0 20px;}

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


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


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .navi-warp ul li{padding: 5px 2px;}
    .section-btnTop{bottom: 25%;}
}