@charset "utf-8";

/*----螢幕寬度小於2000px時----*/
/*---------------------------*/
@media screen and (max-width: 2000px){
        #cancerBn2{display: none;}
        #CurvesBn2{display: none;}    
        #Bn2{display: none;}  
        #actbtn-3{display: none;}
        #actbtn-5{display: none;}

}

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

}


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


/*----螢幕寬度小於於1241px時----*/
/*----------------------------*/
@media screen and (max-width: 1241px){
    /*.p-card > .prize-content{
        line-height: 56px;}*/

    .p-card:nth-of-type(2) > .prize-content{
        line-height: 28px;}
}


/*----螢幕寬度小於於1185px時----*/
/*----------------------------*/
@media screen and (max-width: 1185px){
    .theme-wrap{
        background-position: top -100px left;
    }
}


/*----螢幕寬度小於於1230px時----*/
/*----------------------------*/
@media screen and (max-width: 1230px){
    .campaign-wrap h2,
    .moreBenefits-wrap > h2{font-size: 35px;}
}


/*----螢幕寬度小於於1115px時----*/
/*----------------------------*/
@media screen and (max-width: 1115px){
    .campaign-wrap h2{
        font-size: 28px;
        margin-bottom: 20px;}
        
    .moreBenefits-wrap > h2{
        font-size: 28px;}

    .p-card > .p-content{ font-size: 1.3em;}
    .p-card > .prize-pic{bottom: -20px;}
        .campaign1{
        flex-direction: column;
        padding: 40px 0;}

    .campaign1 > .p-card{
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
        margin-bottom: 40px;
        padding-bottom: 20px;}

    .campaign1 > .p-card:last-child{
        margin-bottom: initial;}

    .p-card > .p-content{ font-size: 1.4em;}

    .p-card > .prize-content{
        line-height: 28px;}

    .p-card:nth-of-type(2) > .prize-content{
        line-height: 28px;} 
    
    .camp4 > .p-content > div > h4{font-size: 1.6em;}
    .camp4 > .p-content > div > p{font-size: 1.3em;}
    .camp4 > .p-content:nth-of-type(1) > div > h4::before,
    .camp4 > .p-content:nth-of-type(2) > div > h4::before{
        top: -1.5em;
        font-size: 0.9em;
        left: 1em;}
    .p-card > .prize-pic {
	    left: 37%;
        bottom: -6px;}
}


/*----螢幕寬度小於於1055px時----*/
/*----------------------------*/
@media screen and (max-width: 1055px){
    .camp4{flex-direction: column;}
    .camp4 > .p-content{
        width: 100%;
        margin: 20px 0;
        padding: 0;
        background: none;
        border-radius: 10px;}

    .camp4 > .p-content > div{
        flex: 2;
        display: flex;
        flex-direction: column;}

    .camp4 > .p-content > div:nth-of-type(2){
        flex: 2;
        border-radius: 10px;}

    .btn-line{
        position: relative;
        display: block;
        margin: 20px auto;
        right: initial;}

    .campaign-wrap{margin-bottom: initial;}
}


/*----螢幕寬度小於於1020px時----*/
/*----------------------------*/
@media screen and (max-width: 1020px){
    .theme-tag{
      left: inherit;
      right: 10%;}

  .p-card > .p-content{font-size: 1.4em;}
}


/*----螢幕寬度小於於975px時----*/
/*----------------------------*/
@media screen and (max-width: 975px){
    .teamwalk-wrap .teamwalk{
        flex-direction: column;}
    
    .teamwalk-wrap .teamwalk > div{
        margin: 20px 0;
        padding: 10px 40px;}

    .teamwalk-wrap .btn-wrap{bottom: -5px;}
    .teamwalk-wrap .teamwalk > div{padding: 10px;}
}


/*----螢幕寬度小於於957px時----*/
/*----------------------------*/
@media screen and (max-width: 957px){
    .campaign-wrap h2 > span.w-break{display: block;}
}


/*----螢幕寬度小於於920px時----*/
/*----------------------------*/
@media screen and (max-width: 920px){
    .theme-shine{background-size: contain;}
}


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


/*----螢幕寬度小於於877px時----*/
/*----------------------------*/
@media screen and (max-width: 877px){
    .p-card > .p-content{ font-size: 1.2em;}
}


/*----螢幕寬度小於於835px時----*/
/*---------------------------*/
@media screen and (max-width: 835px){
    .theme-alung {
        left: -2%;
        width: 50%;
    }

    .theme-date {
        left: 4%;}

    .theme > .theme-title > img {
    left: 12%;}
}


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

}


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

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

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

    .menu-wrap ul li:hover,
    .menu-wrap ul li:active{
       color: #ffff00;}

    .menu-wrap ul li:hover::after,
    .menu-wrap ul li:active::after{
        content: '▼';
        position: absolute;
        display: inline-block;
        width: 100%;
        left: 50%;
        top: -20px;
        transform: translateX(-50%);
        font-size: 12px;
        color: #ffff00;
        animation: menu-arrow-ani 1s ease infinite;}
        @keyframes menu-arrow-ani {
            0%{ transform: translate(-50%, -5px);}
            50%{ transform: translate(-50%, 0px);}
            100%{ transform: translate(-50%,-5px);}
        }

    .menu-wrap ul li:nth-of-type(3):hover::after,
    .menu-wrap ul li:nth-of-type(3):active::after{top: -15px;}
    .menu-wrap ul li:hover a,
    .menu-wrap ul li:active a{color: #fff;} 
    .menu-wrap ul li span::before{font-weight: 400;}

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


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

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


/*----螢幕寬度小於於770px時----*/
/*---------------------------*/
@media screen and (max-width: 770px){
    .moreBenefits-wrap > h2{ padding: 0 100px 0 2%;}
    .moreBenefits-wrap > h2::after{
        padding-right: 2%;
        top: 50%;
        transform: translateY(-50%);}
        @keyframes logo-ani{
            0%{ transform: translateY(-50%) rotate(5deg);
                transform-origin: bottom center;}
            50%{ transform: translateY(-50%) rotate(-5deg);
                 transform-origin: bottom center;}
            100%{ transform: translateY(-50%) rotate(5deg);
                  transform-origin: bottom center;}
            }

    .campaign-wrap > .p-content {
        margin: 5%;
        padding: 5%;}
}


/*----螢幕寬度小於於730px時----*/
/*---------------------------*/
@media screen and (max-width: 730px){
    .menu-wrap ul li{
        flex: 1;
        width: 70px;
        height: 40px;
        padding: 2px 10px;
        line-height: 32px;}
}

/*----螢幕寬度小於於720px時----*/
/*---------------------------*/
@media screen and (max-width: 720px){
    .product-wrap{
        overflow: scroll;
        div{
            display: flex;
            justify-content: left;
            align-items: center;
            flex-wrap: nowrap;
            padding: 8px 0 40px;

            div{
                width: 100%;
                max-width: initial;
                margin: initial;}

        }
    }

    .remider{ display: inline-block;}
    .product-wrap{
        .swiper-pagination{
            display:block;
            margin: 0 auto;
            padding: 10px 0 0;
            bottom: 0px;

            .swiper-pagination-bullet{
                width: 12px;
                height: 12px;
                margin: 0 10px;}
        }
    }

    :root {
        --swiper-theme-color: #dab40a; 
    }        

}



/*----螢幕寬度小於於625px時----*/
/*---------------------------*/
@media screen and (max-width: 625px){
    .theme-wrap{min-height: initial;}
    .theme{padding: 200px 20px 0;}
    .theme-tag{right: 5%;}
}

/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){
    .theme-wrap{background-size: cover;}
    .btn-active{width: auto;}
    .campaign-wrap .btn-active{
        font-size:30px;
        letter-spacing: initial;}

    .rules-wrap{ padding: 20px;}
    .rules-title h3 > span{width: 67%;}
    .btn-wrap{padding: 0 20px;}
    .theme-date {
        top: -17%;}

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

    #cancerBn{display: none;}
    #cancerBn2{
    display: inline-block;
	width: 100%;
	max-width: 1200px;
	cursor: pointer;
    }
    #CurvesBn{display: none;}
    #CurvesBn2{
    display: inline-block;
	width: 100%;
	max-width: 1200px;
	cursor: pointer;
    }
    #Bn{display: none;}
    #Bn2{
    display: inline-block;
	width: 100%;
	max-width: 1200px;
	cursor: pointer;
    }
        .btn-cancer{
        position: relative;
        display: block;
        margin: 20px auto;
        right: initial;}

    .moreBenefits-wrap {
    padding: 80px 2% 0;
}
    .teamwalk-wrap .teamwalk > div{
        flex-direction: column;
        padding: 40px 10px 10px;}

         #actbtn-3-01{display: none;}
        #actbtn-5-01{display: none;}

            #actbtn-3{display:inline-block;}
        #actbtn-5{display:inline-block;}
    .teamwalk div div .prize-pic{
	padding: 0;}
}

/*----螢幕寬度小於於535px時----*/
/*--------------------------*/
@media screen and (max-width: 535px){
    .campaign-wrap h2{ font-size: 24px;}
    .moreBenefits-wrap > h2{
        font-size: 24px;}

    .campaign-wrap h2 > span{ font-size: 30px;}
}


/*----螢幕寬度小於於523px時----*/
/*--------------------------*/
@media screen and (max-width: 523px){
    .menu-wrap ul li:nth-of-type(3){line-height: 18px;}
}


/*----螢幕寬度小於於520px時----*/
/*--------------------------*/
@media screen and (max-width: 520px){
    .camp4 > .p-content > div > h4 {
        font-size: 1.4em;
        margin-top: 1.2em;}

    .camp4 .tag-win::after{
        width: 22%;
        top: 10px;}

    .campaign-wrap > .campaign2 .btn-wrap .btn-active,
    .teamwalk-wrap .btn-wrap > .btn-active{
        font-size: 24px;
        height: 48px;
        line-height: 14px;}

    .btn-active::after{font-size: 16px;}
    .campaign2 > .p-card{padding: 40px 15px;}
    .teamwalk div div p {
        font-size: 1.5em;
        line-height: 1em;
        padding: 20px 0 0;}

    .teamwalk-wrap{padding: 20px 3%;}
    .line-wrap{margin: 70px 0 0;}
}


/*----螢幕寬度小於於480px時----*/
/*--------------------------*/
@media screen and (max-width: 480px){
    .camp4 > .p-content > div:nth-of-type(2){flex: 3;}
    .camp4 > .p-content > div > p{
        padding: 0 10px 10px;
        text-align: left;
        font-size: 1.1em;}

    .camp4 .w-break{display: inline-block;}
    .camp4 .w-break::before{
        content: '，';
        display: inline-block;}
    .camp4 > .p-content > div {
        flex: 3;
    }
}


/*----螢幕寬度小於於465px時----*/
/*--------------------------*/
@media screen and (max-width: 465px){
    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}

    .theme-round2 {
        width: 120%;
        left: 50%;
        top: -145%;}
    .theme-date {
        top: -20%;}
    .p-card > .prize-pic {
	    left: 48%;}
    .theme-alung {
        top:-195%;}
    .theme > .theme-title > img {
    top: -20px;}
.moreBenefits-wrap {
        padding: 50px 2% 0;
    }
}


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

    .theme > .theme-title > img { 
        top: 8px;
        left: 8%;}
}


/*----螢幕寬度小於於416px時----*/
/*--------------------------*/
@media screen and (max-width: 416px){
    .theme-alung {
        top: -75% !important;
        left: -4%;
        background-position: top center;}
}


/*----螢幕寬度小於於390px時----*/
/*--------------------------*/
@media screen and (max-width: 390px){
    .menu-wrap ul li{
        padding: 2px 2px;}

    .teamwalk-wrap .teamwalk div > div{ padding: 10px 0 0;}
    .tw-title{
        left: 50%;
        transform: translateX(-50%);}
    .theme-date {
        top: -22%;}
    .p-card > .prize-pic {
	    left: 50%;}
    .theme-alung {
        top:-235%;}

    .theme-round2 {
    top: -155%;}


    }


/*----螢幕寬度小於於381px時----*/
/*--------------------------*/
@media screen and (max-width: 381px){
    .camp4 > .p-content > div > h4{
        font-size: 1.2em;
        margin-top: 2em;}
}


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media screen and (max-width: 375px){
    #rule1 > h3{font-size: 16px;}
}


/*----螢幕寬度小於於357px時----*/
/*--------------------------*/
@media screen and (max-width: 357px){
    .campaign2 > .p-card {padding: 20px 15px 40px;}
    .camp4 > .p-content{flex-direction: column;}
    .camp4 .p-content .prize-pic > img{max-width: 180px;}
    .camp4 .p-content .prize-pic{background-size: 55%;}
    .campaign-wrap > .campaign2 .btn-wrap{bottom: -70px;}
    .camp4 > .p-content > div{margin: 5px 0 0;}
    .camp4 > .p-content > div > p{
        text-align: center;
        font-size: 1.2em;}
    .camp4 > .p-content > div > h4 {
        font-size: 1.4em;}
    .camp4 .w-break{display: block;}
    .camp4 .w-break::before{display: none;}
    .camp4 .tag-win::after {width: 15%;}
}

/*----螢幕寬度小於於330px時----*/
/*--------------------------*/
@media screen and (max-width: 330px){
    .menu-wrap ul li {
        padding: 2px 15px;
        line-height: 18px;}
    
    .menu-wrap ul li:nth-of-type(3) {
       flex: 2;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .menu-wrap ul li {padding: 2px 8px;}
    .rightBN-wrap {top: -80px;}
    .rightBN-wrap a{width: 80px;}
    .section-btnTop{bottom: 25%;}
}