@media screen and (max-width:1280px) {
  
  .da {padding: 0vw 16px 5vw 16px;}
  .ps01, .ps02, .ps03, .ps04, .bh, .eh {padding: 7vw 16px 5vw 16px;}
  /*******************discount area*******************/
  .da_flexG6_container, .da_flexB2_container {
    flex-wrap:wrap;
    justify-content:space-around;
    padding:0 2vw;
  }
  .da_B3_container {
    padding:0 2.95vw;
  }
  .da_flexG6_item {
    flex-basis: 32%;
  }
  .da_flexB2_item {
    flex-basis: 48%;
  }
  /*******************paradeco*******************/
  .da_paradeco_01, .ps01_paradeco_01, .ps02_paradeco_01, .ps03_paradeco_01, .eh_paradeco_01, .bh_paradeco_01 {display:none;}
}

@media screen and (max-width:1024px) {
  .ps01_title, .ps02_title, .ps03_title, .ps04_title, .bh_title, .eh_title {margin:0px auto 3vw auto;}

  /*******************discount area*******************/
  .da_anchor {position:absolute; top:-128px;}
  .da_flexG6_item.row1a, .da_flexG6_item.row1b {
    margin-top:-6.6vw;
  }
  .da_flexG6_item.row1c {
    margin-top:0vw;
  }
  
  .da_flexG6_item {
    flex-basis: 48%;
    max-width:none;
    position:relative;
    margin-top:0px;
    margin-bottom:20px;
  }
  .da_flexB2_item {
    margin-top:0px;
    margin-bottom:20px;
  }
  .da_B3_item a.modal-btn {
    bottom:13%;
  }
  
  /*******************brand highlight*******************/
  .bh_title {
    width:96%;
    margin:3vw auto;
  }
  .bh_flexG4_container {
    padding:0;
  }
  .bh_flexG4_container.adj_1 {
    margin-bottom:2vw; /*宮格與下方版位間距-可調整*/
  }
  .bh_flexG4_item_wrap {
    justify-content:space-between;
  }
  .bh_flexG4_item, .bh_flexG4_item_wrap {
    width:100%;
  }
  .brandContentBox {
    flex-basis:49%;
    margin-bottom:2vw;
  }
  .brandTitleTag {
    font-size: 0.8em;
    line-height: 1em;
  }
  .brandTitle {
    font-size: 3.2vw;
    margin: 4% 0px;
  }
  .brandTitle02 {
    font-size: 0.8em;
    line-height: 1em;;
  }
  .btn_brand {
    width: 100%;
    left:0;
  }
  
  /*******************event highlight*******************/
  .eh_title {
    width:96%;
    margin:3vw auto;
  }
  .eh_flexG4_container {
    width:100%; /*手機版宮格總寬度-可調整*/
    flex-wrap:wrap;
    justify-content:space-between;
    padding:0;
  }
  .eh_flexG4_item {
    margin-bottom:3vw; /*宮格與下方版位間距-可調整*/
    flex-basis: 49%;
  }
  .eventInfo {
    padding: 2px 2vw;
    text-align: center;
  }
  .eventTitle {
    font-size: 1.2em;
    line-height: 1.6em;
  }
  .eventDesc {
    font-size: 1em;
    line-height: 1.4em;
  }
  .btn_event {
    width: 60%;
    margin-top:2vw;
  }
  
}

@media screen and (max-width:767px) {
  /*******************common setting*******************/
  .for_desktop {display:none;}
  .for_mobile {display:block;}
  
  section .petal_set div:nth-child(1){
    animation:petal_animate_01 16s ease-out infinite ;
  }
  section .petal_set div:nth-child(2){
      animation:petal_animate_02 11s ease-in infinite ;
  }
  section .petal_set div:nth-child(3){
      animation:petal_animate_03 14s ease-out infinite ;
  }
  
  /*******************discount area*******************/
  .da_anchor {position:absolute; top:-128px;}
  .da_flexG6_item.row1a {
    margin-top:-6.6vw;
  }
  .da_flexG6_item.row1b, .da_flexG6_item.row1c {
    margin-top:0px;
  }
  .da_flexG6_item {
    flex-basis: 96%;
    position:relative;
  }
  .da_flexG6_item a.modal-btn, .da_flexG6_item a.modal-btn-linkout {
    font-size: 1.2em;
  }
  .da_flexB2_item {
    flex-basis: 96%;
    position:relative;
  }
   .da_B3_item {
    width: 98%;
  }
  .da_B3_item a.item_img_btn {
    width:30%;
    left:35%;
    bottom:11%;
    margin: 0 auto;
  }
.da_B3_item a.item_img_btn:hover {
    background-image:url("../images/sp_btn_01h@2x.png");
}
.da_B3_item a.modal-btn {
    width:50%;
    left:25%;
    bottom:4%;
    text-align: center;
    margin:0 auto;
}
.da_B3_item a.modal-btn:hover {
  color:#fef4d1;
}
  
  /*******************promo section 01*******************/
  .ps01_wrap::before {
    content: "";
    width:100%;
    height:40px;
    display:block;
    background-image:url("../images/ps_01_bg_topcurve.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size:cover;
    position:absolute;
    top:0px;
    z-index:2;
  }
  /*.ps01 {
    padding: 12vw 0px 6vw 0px;
  }*/
  .ps01_title {
    width:96%;
    margin:0px auto 5vw auto;
  }
  .ps01_flexG4_container {
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .ps01_flexG4_item {
    margin-bottom:4vw; /*宮格與下方版位間距-可調整*/
    flex-basis: 49%;
  }
  .ps01 .morebtn {
    width:60%;
    max-width:357px;
  }
  
  /*******************promo section 02*******************/
  .ps02_wrap::before {
    content: "";
    width:100%;
    height:40px;
    display:block;
    background-image:url("../images/ps_01_bg_topcurve.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size:cover;
    position:absolute;
    top:0px;
    z-index:2;
  }
  /*.ps02 {
    padding: 12vw 0px 6vw 0px;
  }*/
  .ps02_title {
    width:96%;
    margin:0px auto 5vw auto;
  }
  .ps02_flexG4_container {
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .ps02_flexG4_item {
    margin-bottom:4vw; /*宮格與下方版位間距-可調整*/
    flex-basis: 49%;
  }
  .ps02 .morebtn {
    width:84%;
  }
  
  /*******************promo section 03*******************/
  .ps03_wrap::before {
    content: "";
    width:100%;
    height:40px;
    display:block;
    background-image:url("../images/ps_03_bg_topcurve.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position:absolute;
    top:0px;
    z-index:2;
  }
  /*.ps03 {
    padding: 12vw 0px 6vw 0px;
  }*/
  .ps03_title {
    width:96%;
    margin:0px auto 5vw auto;
  }
  .ps03_rg_container_L, .ps03_rg_container_R  {
    width:100%;
    padding:0px 0vw 3vw 0vw;
    grid-gap: 3vw;
  }
  
  
  /*******************promo section 04*******************/
  .ps04_title {
    width:96%;
    margin:0px auto 5vw auto;
  }
  .ps04_rg_container_L, .ps04_rg_container_R  {
    width:100%;
    padding:0px 0vw 3vw 0vw;
    grid-gap: 3vw;
  }
  
  /*******************event highlights*******************/

  
  /*******************event highlights*******************/


  /*******************follow us*******************/
  .fu_title {
    width:96%;
    margin:3vw auto;
  }
  .fu_flexG4_container {
    flex-wrap:wrap;
    justify-content:space-around;
    margin:8vw auto 0;
    padding:2vw;
  }
  .fu_flexG4_container::after {
    width: 42vw;
    height: 7vw;
    top: -5vw;
    margin-left: -21vw;
  }
  a.fu_flexG4_item {
    margin:1vw 0; /*宮格與下方版位間距-可調整*/
    flex-basis: 48%;
  }
  .fu_item_name {
    font-size: 3vw;
    padding: 0.5% 1.5%;
    margin: 5% 0;
    font-weight: 600;
  }
  .fu_item_account {
    font-size: 2vw;
    line-height: 1.5em;
    margin-bottom: 10%;
  }
  .fu_item_cta {
    font-size: 2vw;
    line-height: 6vw;
    border-top:1px solid #ccc;
  }
  
}

/*******************btn*******************/
/*******************btn*******************/
@media (max-width:1279px) {
  .btn, .livelyBtn, .drawBtn, .solidBtn, .flashBtn {font-size: 1em; line-height: 2.4em;}
}
@media (max-width:767px) {
  .btn, .livelyBtn, .drawBtn, .solidBtn, .flashBtn {font-size: 0.8em; line-height: 2.4em;}
}
@media (max-width:414px) {
  .btn, .livelyBtn, .drawBtn, .solidBtn, .flashBtn {font-size: 0.7em; line-height: 2.4em;}
}
/*******************popUp*******************/
/*******************popUp*******************/
@media (max-width:1400px) {
  .modal-body-text-wrap h5{font-size: 1.2vw;} 
}
@media (max-width:1280px) {
  .modal-body-text-wrap h5{font-size: 1.3vw;}
}
@media (max-width:1024px) {
  .modal-body-text-wrap h5{font-size: 1.6vw;}
}
@media (max-width:768px) {
  .modal-body-text-wrap h5{font-size: 2.1vw;}
  .modal-content {width: 90%;}
}
@media (max-width:625px) {
  .modal-body-text-wrap h5{font-size: 2.8vw;}
}
@media (max-width:510px) {
  .modal-body-text-wrap h5{font-size: 3.7vw;}
}
@media (max-width:499px) {
  .modal-header h3 {font-size: 18px;}
  .modal-body-text-wrap h5 {font-size: 4.1vw; line-height: normal;}
}

/*******************sideBar*******************/
/*******************sideBar*******************/
@media (max-width:1280px) {
	.menu {width: 15%;}
	.menu__style {padding: 6% 1% 10%;}
	.menu ul li {font-size: 1.2vw;line-height: 2.5vw;}
}
@media (max-width:1024px) {
	.menu {width: 18%;}
	.menu ul li {font-size: 1.5vw; line-height: 3.2vw;}
}
@media (max-width:768px) {
  .menu {width: 100%; bottom: 0; right: 0;}
	.menu>img {max-width: 28%; margin-left:8px; padding: 0;}
	.menu__style {padding: 1% 4% 2% 4%;}
	.menu ul li {padding: 2px 8px;font-size: 0.95em;line-height: 2em;width: auto;}
	#sidebar .toggle-btn{bottom: 0px;border-radius: 5px 0 0 0;}
}
@media (max-width:375px) {
	.menu__style {padding: 1% 6% 2% 6%;}
  .menu ul li {font-size: 0.8em;line-height: 1.8em;}
	#sidebar .toggle-btn span{width: 26px;font-size: 0.9em;margin: 3px 0;}
}

/*******************toTop*******************/
/*******************toTop*******************/
@media (max-width:768px) {
  .toTop-arrow{bottom: 14%;}
}
@media (max-width:520px) {
  .toTop-arrow{bottom: 16%;}
}
@media (max-width:320px) {
  .toTop-arrow{bottom: 18%;}
}

