@charset "utf-8";

@media (min-width:1921px) {
	/*sidenav*/
	.menu {
		right: 1%;
		bottom: 11%;
		width: 9%;
	}
	.menu>img {
		margin-bottom: 4%;
		padding: 3%;
	}
	.menu__style {
		padding: 0%;
		border-radius: 0px;
	}
	.menu ul li {
		line-height: 2.4em;
		font-size: 1vw;
    }
}

@media (max-width:1920px) {
	/*sidenav*/
	.menu {
	right: 1%;
    bottom: 11%;
    width: 10%;
	}
	.menu>img {
		margin-bottom: -8%;
		/* padding: 3%; */
	}
	.menu__style {
		padding: 0%;
		/* padding: 8% 8% 10%; */
	}
	.menu ul li {
		line-height: 2.4em;
		font-size: 1vw;
    }
}

@media (max-width:1800px) {
    .title-area h3 {
        font-size: 3vw;
    }
    .moreBtn1 {
        font-size: 1.4vw;
    }
	/*sidenav*/
	.menu {
		right: 1%;
		bottom: 11%;
	}
	.menu>img {
		margin-bottom: -6%;
		/* padding: 3%; */
	}
	.menu__style {
		padding: 0%;
		border-radius: 0px;
    }

}

@media (max-width:1500px) {
    .btn4-wrapper {
        width: 12%;
        margin: -8.5% 40% 0% 48%;
    }
    .btn2-wrapper {
        width: 12%;
        margin: -10% 40% 0% 48%;
    }
    .btn_brand {
        width: 60%;
        margin: 0% 20%;
    }
    .btn3-wrapper {
        width: 16%;
        margin: -33% 42% 0% 42%;
    }
    .btn3 {
        padding: 8px;
        font-size: large;
    }
    .havefunArea {
        width: 80%;
        margin: 0% 10%;
    }
}


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

    .btn4-wrapper {
        width: 14%;
    }
    .btn2-wrapper {
        width: 14%;
        margin: -10% 38% 0% 48%;
    }
    .btn2 {
        padding: 8px 0px;
    }

    /* 免費接駁車  */
    .shuttle {
        width: 80%;
        margin: 0% 10%;
    }

    /**優惠**/

    .discountBox {
        width: 98%;
    }

    .f3_dis {
        font-size: 2.2vw;
    }
    .f4_dis {
        font-size: 1.8vw;
    }


    .bk-gray1-img {
        background-image: url(../images/bk-discount.gif);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color: #f6f6f6;
        background-size: 1286px 87px;
    }
    .title-area img {
        max-width: 46%;
        margin: 2% 27% 0%;
    }
    .title-area2 img {
        max-width: 60%;
        margin: 2% 20% 0%;
    }
    .title-area3 img {
        max-width: 34%;
        margin: 2% 33% 0%;
    }
    .title-area4 img {
        max-width: 44%;
        margin: 2% 28% 1%;
    }

    .havefunArea {
        width: 90%;
        margin: 0% 5%;
    }
    .havefunArea2 {
        width: 90%;
        margin: 0% 5%;
    }
    .koltit01 {
        bottom: -10%;
    }

    /* 流程  */
    .stepBox {
        width: 90%;
    }
    .stepBox ul li h3 {
        font-size: 1.8vw;
        padding: 11% 0.5% 0% 4.5%;
    }
    .stepBox ul li h5{
        font-size: 1.6vw;
    }
    .stepBox ul li p {
        font-size: 1.6vw;
    }
    .stepTxtType {
        margin-left: -6%;
    }

    /*常見問題*/
    #qa {
        width: 76%;
    }
    .tab {
        height: 56px;
        width: 26%;
        font-size: 2.2vw;
    }
    .q_large {
        font-size: 2.8vw;
    }
    .q_normal {
        font-size: 1.6vw;
    }
    .qaInfo02 {
        font-size: 1.4vw;
        padding: 1.5% 2% 2% 4%;
        width: 90%;
    }
    .qa00 {
        font-size: 2vw;
    }

    .qa01,
    .qa02,
    .qa03,
    .qa04 {
        width: 100%;
    }

    .qa01 ul,
    .qa02 ul,
    .qa03 ul {
        width: 91%;
    }

    .qaTitle_02 {
        font-size: 2vw;
    }

    .qaTxt {
        font-size: 1.5vw;
    }

    .btn_more {
        padding: 2.5% 38%;
    }
    .moreBtn1 {
        width: 40%;
        font-size: 1.6vw;
        margin: 0% 30% 0%;
    }
    .bg-yellow-QA {
        /* background-image: url(../images/QandA.gif); */
        background-repeat: no-repeat;
        background-position: 5.5% 62%;
        /* background-color: #f8e67f; */
        background-size: 101px 257px;
    }


    /*map*/
    .transport {
        width: 60%;
        margin-left: 20%;
    }

    .transportationTitle,
    .transportationInfo,
    .qaTxt4 {
        font-size: 1.25vw;
    }
    /*sidenav*/
	.menu {
		right: 1%;
		bottom: 11%;
		width: 14%;
	}
	.menu>img {
		margin-bottom: -8%;
		/* padding: 3%; */
	}
	.menu ul li {
		line-height: 2.4em;
	}
	.animate-button.bg-seemore {
		font-size: 1.2vw;
		position: absolute;
		left: 20%;
		bottom: 10%;
	}
	.menu__style {
		padding: 0%;
		border-radius: 0px;
	}
	.menu ul li {
		font-size: 1em;
		line-height: 2.1em;
	}
}


@media screen and (max-width:1024px) {
    .stepBox ul li p {
        font-size: 1.8vw;
    }
    .stepTxt1 {
        padding: 15.5% 0% 0% 5.5%;
    }
    .discountBox_default {
        width: 32%;
    }
    .btn2 {
        font-size: small;
    }

    .koltit01 {
        margin-top: 5%;
    }

    .title-area img {
        max-width: 54%;
        margin: 2% 23% 0%;
    }
    .title-area2 img {
        max-width: 72%;
        margin: 2% 14% 0%;
    }
    .title-area3 img {
        max-width: 44%;
        margin: 2% 28% 0%;
    }
    .title-area4 img {
        max-width: 54%;
        margin: 2% 23% 1%;
    }

    /* 免費接駁車  */
    .shuttle {
        width: 90%;
        margin: 0% 5%;
    }

    /*流程*/
    .stepBox {
        width: 96%;
    }

    .stepBox ul li {
        width: 27.7%;
    }
    .stepBox ul li h3 {
        font-size: 2vw;
    }
    .stepBox ul li h5 {
        font-size: 1.8vw;
    }

    .stepTitle,
    .shopTitle,
    .qaTitle,
    .mapTitle,
    .kolTitle {
        font-size: 3.6vw;
    }

    .stepTxt,
    .couponNotice {
        font-size: 2.2vw;
    }

    .stepTxtType {
        line-height: 1.4em;
    }

    /* .stepBox ul li,
    .abStepBox ul li {
        width: 49%;
    } */

    .stepTxt {
        width: 30%;
        padding: 12.5% 3% 0% 6%;
    }

    .txtType {
        font-size: 1.7vw;
    }

    .koltit02s {
        font-size: 1.5vw;
        line-height: 1.5;
    }
    .koltit02ss {
        font-size: 1.2vw;
    }


   /*常見問題*/
   .bg-yellow-QA {
    background-position: 1% 62%;
   }

   #qa {
    width: 80%;
    }
    .q_normal {
        font-size: 2.2vw;
    }
    .qaBox {
        margin: 3% auto 0;
    }
   .qa01,
   .qa02,
   .qa03,
   .qa04 {
       width: 100%;
   }

   .tab {
    height: 48px;
    width: 30%;
    }
    .qaInfo02 {
        font-size: 1.8vw;
        padding: 1.5% 2% 2% 6%;
    }

   .qaTitleLine_02 {
       width: 22.5vw;
   }

   .qaTitle_02 {
       font-size: 2.5vw;
   }

   .qaTxt {
       font-size: 2vw;
   }

   .btn_more {
       width: 100%;
       padding: 0 36%;
   }
   .moreBtn1 {
    width: 50%;
    font-size: 2vw;
    margin: 0% 25% 0%;
    }

    /*KOL*/

    .kolBg {
        width: 78%;
        margin: 0 11%;
    }

    .kolBox02 {
        /*margin-top: 2%;*/
    }

    .kolBox02:last-child {
        /*margin: 3.7% 0 2.5%;*/
    }

    .kolContent {
        padding: 1.2% 8%;
    }

    .kolvideo {
        padding: 4% 0;
    }

    .kolvideo > iframe {
        height: 23.6vw;
    }

    .koltit01 {
        font-size: 1.6vw;
        bottom: -16%;
    }

    .koltit02 {
        font-size: 1.6vw;
    }

    .koltit03 {
        font-size: 1.5vw;
    }

    .kolToBuyBox {
        font-size: 1.4vw;
    }

    /*map*/
    .transport {
        width: 70%;
        margin-left: 15%;
    }

    .transportationTitle,
    .transportationInfo,
    .qaTxt4 {
        font-size: 1.5vw;
    }
    /*sidenav*/
	.menu {
		right: 1%;
        bottom: 10%;
        width: 16%;
	}
	.menu>img {
		margin-bottom: 4%;
		padding: 3%;
	}
	.menu__style {
		padding: 6% 1% 10%;
		border-radius: 0px;
	}
	.menu ul li {
		line-height: 2.4em;
	}

}

@media screen and (max-width:991px) {
    .menu {
        width: 17%;
    }
    .btn_brand {
        width: 74%;
        margin: 0% 13%;
    }
    .btn3-wrapper {
        width: 20%;
        margin: -33% 40% 0% 40%;
    }
    .btn3 {
        font-size: medium;
    }
}


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

    /*kv*/
    .kv {
        display: none;
    }

    .mkv {
        display: block;
    }

    .discountBox {
        padding-top: 23%;
    }

    .title-area h3 {
        font-size: 5vw;
    }
    .discountBox_default {
        width: 48%;
    }

    .f6_date {
        font-size: 3.2vw;
    }
    .f3_dis {
        font-size: 3.2vw;
    }
    .content-text1 {
        font-size: 2.6vw;
    }
    .mt7 {
        margin-top: 5%;
    }
    .discountBox_odd {
        margin-top: -16%;
        margin-right: 50%;
        margin-bottom: 3%;
    }
    .bg-grey {
        background-image: url(../images/bg__img__grey.jpg);
        background-position: right top;
        background-size: cover;
    }

    .title-area img {
        max-width: 70%;
        margin: 2% 15% 0%;
    }
    .title-area2 img {
        max-width: 90%;
        margin: 2% 5% 0%;
    }
    .title-area hr {
        width: 40%;
    }

    /* 怪獸系列品 */
    .monster {
        display: none;
    }

    .mmonster {
        display: block;
    }
    .EBX_gift {
        display: none;
    }

    .mEBX_gift {
        display: block;
    }

    .havefunArea {
        width: 100%;
        margin: 0% 0%;
    }
    .havefunArea2 {
        width: 100%;
        margin: 2% 0% 0%;
    }
    .koltit01 {
        font-size: 2.1vw;
        bottom: -22%;
        font-weight: 600;
    }

    /*coupon*/
    .couponBox li {
        width: 100%;
        margin: 0.5% 0;
    }

    .couponTxt01 {
        font-size: 2.4vw;
    }

    .couponTxt02 {
        font-size: 2.2vw;
    }

    .koltit02s {
        font-size: 2vw;
    }
    .koltit02sss {
        font-size: 1.6vw;
    }

    /*流程*/
    .tab {
        font-size: 3.2vw;
    }

    .stepTitle,
    .shopTitle,
    .qaTitle,
    .mapTitle,
    .kolTitle {
        font-size: 4.2vw;
    }

     .stepTxt {
        font-size: 2.5vw;
    }


    .txtType {
        font-size: 2vw;
    }
    .qaInfo02 {
        font-size: 2.2vw;
    }
    .toTop-arrow {
        bottom: 150px;
    }

    /*popup*/
    .modal-content {
        width: 90%;
    }

    /*KOL*/
    .kolBg {
        display: none;
    }

    .kolBg_p {
        display: block;
        width: 70%;
        margin: 0 15%;
        position: absolute;
    }

    .kolBox02 {
        /*margin-bottom: 2.5%;*/
    }

    .kolBox02:last-child {
        /*margin-bottom: 4%;*/
    }

    .kolContent {
        display: inline-table;
        padding: 0% 5%;
        width: 90%;
        margin: 0 5%;
    }

    .kolvideo {
        width: 85%;
        margin: 0 auto;
        padding: 3% 0 1.5%;
    }

    .kolvideo > iframe {
        height: 39vw;
    }

    .kolBuy {
        width: 100%;
    }

    .kolToBuyBox {
        font-size: 2.1vw;
        width: 75%;
    }

    .kolToBuy {
        padding: 3% 4%;
    }

    .koltit02 {
        font-size: 2.2vw;
    }

    .koltit03 {
        font-size: 2.2vw;
    }

    .kolToBuyBrand {
        margin-top: 14%;
    }


    /*常見問題*/
    .qaTitleLine_02 {
        width: 27.5vw;
    }

    .qaTitle_02 {
        font-size: 2.8vw;
    }

    .qaTxt {
        font-size: 2.4vw;
    }
    .moreBtn1 {
        width: 60%;
        font-size: 2.4vw;
        margin: 0% 20% 4%;
    }
    .btn4-wrapper {
        width: 24%;
        margin: -20% 16% 0% 60%;
    }

    .btn2-wrapper {
        width: 24%;
        margin: -22% 16% 0% 60%;
    }
    .btn2 {
        font-size: large;
    }


    /*map*/
    .transportationTitle,
    .transportationInfo,
    .qaTxt4 {
        font-size: 1.8vw;
    }

    .transportationTitle {
        width: 25%;
    }

    .transportationInfo {
        width: 75%;
    }

    .shop > .transportationTitle > img {
        width: 25px;
        height: 25px;
        margin-right: 3.5%;
        margin-top: 5.5%;
    }

    .shopInfo {
        padding-top: 1%;
    }

    /*  派樣機 */
    .btn3-wrapper {
        width: 30%;
        margin: -78% 35% 0% 35%;
    }
    .btn3 {
        padding: 12px;
        font-size: larger;
    }

    /* sidenav */
	.menu {
		width: 100%;
		bottom: 0;
		right: 0;

	}
	.menu>img {
		max-width: 23%;
		margin-bottom: -2.5%;
		padding: 0;
		opacity: 0.9;
	}
	.menu__style {
		padding: 0% 4% 0% 2%;
		border-radius: 0px;
	}
	.menu ul li {
		padding: 2px 16px;
		font-size: 1.2em;
		width: auto;
		border-bottom: 0px;
		/* padding: 2px 10px;
		font-size: 1.2em;
		line-height: 2.1em;*/
	}
	.menu ul li:hover {
		color: #000000;
	}

    /* 收合導覽*/
	#sidebar .toggle-btn span {
    display: block;
   	width: 44px;
	line-height: normal;
	}

}

/* 540 */
@media screen and (max-width:540px) {
    .f3_dis {
        font-size: 6vw;
    }
    .f4_dis {
        font-size: 5vw;
        line-height: normal;
    }
    .discountBox_default {
        width: 80%;
    }
    .discountBox {
        padding-top: 0%;
    }
    .btn2 {
        font-size: medium;
        padding: 4px 0px;
    }
    .f6_date {
        font-size: 5.6vw;
    }
    .title-area {
        width: 90%;
    }
    .title-area h3 {
        font-size: 6vw;
    }


    .havefunArea {
        display: block;
    }
    .havefunArea2 {
        display: block;
        width: 98%;
        margin: 0% 1%;
    }
    .yt-container {
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        margin: 2% 0% 8%;;
    }

    .havefunBox {
        width: 84%;
        padding-bottom: 4%;
    }
    .havefunBox2 {
        margin: 0 1%;
        padding-bottom: 6%;
        width:98%
        /* width: 48%; */
    }
    .koltit02s {
        font-size: 3vw;
        line-height: 1.5em;
        padding: 0% 2%;
    }
    .koltit02ss {
        font-size: 2.6vw;

    }
    .title-area img {
        max-width: 100%;
        margin: 2% 0% 0%;
    }
    .title-area2 img {
        max-width: 100%;
        margin: 2% 0% 0%;
    }

    /* 免費接駁車  */
    .shuttle {
        width: 90%;
        margin: 0% 5%;
    }
    .shuttle img{
        border-radius: 16px;
    }


    /*流程*/

    .q_normal {
        font-size: 3.4vw;
    }

    .stepBox {
        padding-top: 2%;
    }

    .stepBox,
    .abStepBox,
    .couponStepBox {
        width: 70%;
    }
    .discountArea {
        margin-top: 0%;
        background-image: linear-gradient(to bottom, #dbd5d9 0%, #cecacb 35%, #cecacb 100%);
    }
    .stepBox ul, .couponStepBox ul {
        width: 100%;
        margin: 0% auto 3%;
        background-image: url(../images/arrow-540.png);
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        background-size: 20%;
    }

    .bg-grey {
        background-image: url(../images/bg__img__grey-notext.jpg);
        /* background-color: rgb(227 217 203); */
        background-size: cover;
        /* background-repeat: repeat; */
    }
    .bg__img__fun {
        background-image: url(../images/bg__img__fun_text.png), url(../images/bg__img__grey-notext.jpg);
        background-repeat: no-repeat;
        background-size: 20%, cover;
        /* background-size: cover; */
    }

    .stepBox ul,
    .abStepBox ul {
        width: 100%;
    }

    .stepBox ul li {
        width: 90%;
        margin: 0.5% 7%;
    }

    .stepTitle {
        width: 62%;
        padding: 13% 0.5% 0% 17%;
        border: 0px #555555 solid;
        text-align: left;
    }
    .stepBox ul li h3 {
        font-size: 4.5vw;
        width: 92%;
        padding: 35% 4% 0% 15%;
    }

    .stepBox ul li h5 {
        font-size: 3.4vw;
    }
    .stepTxtType {
        margin-left: -8%;
    }
    .stepBox ul li p {
        font-size: 3.8vw;
    }

    .couponText {
        width: 48.1%;
    }

    .stepTitle,
    .shopTitle,
    .qaTitle,
    .mapTitle,
    .kolTitle {
        font-size: 5.6vw;
    }
    .stepTxt {
        width: 66%;
        padding: 32% 3% 10% 10%;
        font-size: 3vw;
    }

    .stepTxt1 {
        width: 75%;
        padding: 50% 0% 0% 16%;
    }


    /*KOL*/
    .kolBg_p {
        width: 90%;
        margin: 0 5%;
    }

    .kolBox02 {
        /*margin-bottom: 10%;*/
    }

    .kolBox02:last-child {
        /*margin-bottom: 6%;*/
    }

    .kolContent {
        padding: 1.2% 0%;
        margin: 0% 5% 3%;
    }

    .kolvideo {
        width: 91%;
    }

    .kolvideo > iframe {
        height: 46.5vw;
    }

    .kolToBuyBox {
        font-size: 3.1vw;
        width: 88%;
    }

    .koltit01 {
        font-size: 3.4vw;
        margin-top: 0;
        bottom: -10%;
        line-height: normal;
    }

    .koltit02 {
        font-size: 3.4vw;
        padding: 0% 2%;
    }

    .koltit03 {
        font-size: 3.2vw;
        width: 91%;
    }
    .kolToBuyBrand2 {
        padding: 10% 0%;
        font-size: 0.95vw;
    }


    /*常見問題*/
    .tab {
        width: 34%;
        font-size: 3.6vw;
    }
    .title-area3 img {
        max-width: 100%;
        margin: 2% 0% 0%;
    }
    #qa {
        width: 96%;
    }
    .qa01,
    .qa02,
    .qa03,
    .qa04 {
        width: 100%;
    }

    .qaTitleLine_02 {
        width: 39.5vw;
    }

    .qaTable {
        display: none;
    }
    .qaInfo02 {
        font-size: 3.1vw;
    }

    .qaTable_m01,
    .qaTable_m02 {
        display: block;
    }

    .qaList {
        width: 25px;
        height: 25px;
        line-height: 25px;
    }

    .qaTitle_02 {
        font-size: 4.2vw;
    }

    .qaTxt,
    .qaTable {
        font-size: 3.4vw;
    }

    .tr {
        line-height: 1.5em;
    }

    .btn_more {
        padding: 0 27%;
    }

    .moreBtn1 {
        font-weight: 600;
        width: 90%;
        font-size: 4vw;
        margin: 1% 5% 6%;
        padding: 2% 0%;
    }
    .bg-yellow-QA {
        /* background-image: url(../images/QandA_.gif); */
        background-repeat: no-repeat;
        background-position: 5.5% 62%;
        /* background-color: #f8e67f; */
        background-size: 101px 257px;
    }


    /*map*/
    .title-area4 img {
        max-width: 100%;
        margin: 2% 0% 1%;
    }
    .transport {
        width: 86%;
        margin-left: 7%;
    }

    .transportationTitle,
    .transportationInfo,
    .qaTxt4 {
        font-size: 3vw;
    }

    .transportationTitle {
        width: 30%;
    }

    .transportationInfo {
        width: 70%;
    }

    /* sidenav */
	.menu {
		width: 100%;
		bottom: 0;
		right: 0;
	}
	.menu>img {
		max-width: 30%;
		margin-bottom: -4%;
		padding: 0;
	}
	.menu__style {
		padding: 10px 50px 0px 10px;
		border-radius: 0px;
	}
	.menu ul li {
	font-size: 1em;
    line-height: 1.5em;
	}
	.menu ul li:hover {
    color: #202020;
	}
	.menu__style li:hover {
		color: rgb(32, 32, 32);
    }
	/* 收合導覽*/
	#sidebar .toggle-btn span {
    display: block;
    width: 45px;
    height: 73px;
    line-height: normal;
    padding: 0px;
    }
    
    /* 派樣機 */
    .btn2 {
        font-size: medium;
        padding: 4px 0px;
    }

    .btn4-wrapper {
        width: 28%;
        margin: -20% 12% 0% 57%;
    }

    .btn2-wrapper {
        width: 28%;
        margin: -22% 12% 0% 60%;
    }

    .btn3-wrapper {
        width: 40%;
        margin: -78% 30% 0% 30%;
    }
    .btn3 {
        padding: 8px;
        font-size: large;
    }

}

@media screen and (max-width:420px) {
    .btn2 {
        font-size: small;
    }
    /* 派樣機 */
    .btn3-wrapper {
        width: 40%;
        margin: -78% 30% 0% 30%;
    }
    .btn3 {
    padding: 6px;
        font-size: medium;
    }
}