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

.menu_logo{
  margin: 10px auto 15px auto;
}

.top_height{
  padding-bottom: 140px;
}

.menu_ul>li>a{
  padding: 10px 15px;
  font-size: 20px
}

.menu_ul>li>a.fly_menu{
  padding: 10px 15px;
}

.top_height.fly_menu {
    padding-bottom: 140px;
}

.title_01 h1,.title_02 h1 {
    font-size: 22px;
}

.i_box3 {
    padding: 20px 0;
}

.i_b4_box{
  padding: 0 80px;
}

.menu_box_div{
  top: 50px;


}


}



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

.i_b4_a {
    position: inherit;
    right: auto;
    font-size: 16px;
    top: auto;
    transform: translateY(0);
    margin: 10px 0 0 0 ;
    text-align: center;
  }

.i_b4_ul li h1 {
    margin: 8px 0 3px 0;
}

.i_b4_ul li h2{
    margin: 0px 0 10px 0;
}

.i_b4_add, .i_b4_buy {
    display: inline-block;
    width: calc(50% - 10px);
    padding: 7px 10px;
    border-radius: 3px;
    text-align: center;
}

}

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

.menu_icon img{
  width: 35px;
}

.i_b1_box li a span {
    right: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    padding: 10px 0 0 10px;
}

.i_b1_box li a h1{
  font-size: 18px;
}

.i_b2_box li a h1{
    font-size: 18px;
    padding: 20px 20px;
}

.i_b3_img h1 {
    font-size: 12px;
    padding: 4px 5px;
}

.i_b3_box h2 {
    font-size: 20px;
}

.i_b3_box h3 {
    margin: 6px 0 0 0;
    font-size: 16px;
}

.i_b3_box_1 {
    margin: 30px auto;
}

.about_box1 {
    margin: 60px auto 50px auto;
}

.about_box2 li h1 {
    font-size: 36px;
    padding: 0 0 5px 0;
}

.about_box2 li h2 {
    font-size: 22px;
    margin: 5px auto 30px auto;
}

.about_box2 li h3 {
    font-size: 16px;
    width: 90%;

}

.about_box2 li h2:after {
    bottom: -18px;

}  

.about_box3 {
    margin: 50px auto 10px auto;
}

.about_box3 h1 {
    font-size: 32px;
    padding: 0 0 5px 0;
}

.about_box3 h2 {
    font-size: 18px;
    margin: 10px auto 20px auto;
}

.about_box4 li h1 {
    font-size: 22px;
}

.about_box4 li h2 {
    font-size: 16px;
  }

.about_box4 {
    margin: 20px auto 60px auto;
}

.pro_right h1 {
    font-size: 28px;
    padding: 0 5px 7px 5px;
}

.pro_right h2 {
    font-size: 16px;
    padding: 0 5px 20px 5px;
}

.pro_right h3 {

    padding: 5px 5px 20px 5px;
    line-height: 26px;
}

.pro_ul_a {
    position: inherit;
    right: auto;
    font-size: 16px;
    top: auto;
    transform: translateY(0);
    margin: 10px 0 0 0;
    text-align: center;
}

.pro_ul_add, .pro_ul_buy {
    display: inline-block;
    width: calc(50% - 10px);
    padding: 7px 10px;
    border-radius: 3px;
    text-align: center;
}
.pro_ul li h2{
  margin: 0;
}

}



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

.top_height {
    padding-bottom: 70px;
}

  .menu_box,.menu{
    display:none;
  }
  .mini_menu_box {
    display: block;
  }
  .mini_menu{
    display:block;
  }

/* -----------------------------三條線--------------------------------- */
  .mini_menu_icon {
      transition: .5s;
      width: 35px;
      height: 50px;
      display: block;
      position: absolute;
      top: 53%;
      left: 25px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      cursor: pointer;
      padding-top: 8px; 
      z-index: 19}
  .mini_menu_icon li:nth-child(2){
    transition: .2s
  }
  .mini_menu_icon li {
        width: 100%;
        height: 3px;
        background: #b2ddea;
        margin-bottom: 10px;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; 
         border-radius: 15px
  }
  .mini_menu_icon.active li:nth-child(1) {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: 23px;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; 
  }
  .mini_menu_icon.active li:nth-child(2) {
       /*  margin-left: 500px */;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: .1s;opacity: 0.0; 
  }
  .mini_menu_icon.active li:nth-child(3) {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 23px;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; 
  }


  .mini_icon, .mini_icon2 {
     float: right;
     margin-top: 33px;
     width: 30%;
     text-align: right;
  }

.mini_icon li, .mini_icon2 li {
  display: inline-block; 
  text-align: center;
  margin-right: 15%; 
}
.mini_icon li a, .mini_icon2 li a {
   color: #FFF;
   font-size: 0.5rem;
   display: block;
   width: 100%;
   text-align: center; 
 }
.mini_icon li a .icon-people, .mini_icon li a .icon-cart, .mini_icon li a .icon-search, .mini_icon2 li a .icon-people, .mini_icon2 li a .icon-cart, .mini_icon2 li a .icon-search {
  margin: 0;
  padding: 0; 
}
.mini_icon2 {
    float: left;
    width: auto;
    margin-left: 15%; 
  }

/* -------------------------------------------------------------- */




.mini_menu_box {
  width: 100%;
  padding: 0 3%;
  height: 70px;
  border-top: #b2ddea 5px solid;
  position: fixed;
  top: 0;
  z-index:18;
  background:#fff;
  box-shadow: -1px -3px 27px rgba(51, 51, 51, 0.3); 
  -webkit-box-shadow: -1px -3px 27px rgba(51, 51, 51,0.3); 
  -moz-box-shadow: -1px -3px 27px rgba(51, 51, 51, 0.3);
 }

.mini_menu {
    position: fixed;
    width: 100%;
    max-width: 100%;
    height: 100%;
    right: -100%;
    top: 70px;
    height: 100%; 
    /*background: rgba(245, 245, 245, 0.9);*/
    background: #fff;
    z-index: 99;
    padding: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    overflow-y: auto;
    overflow-x: hidden;
    
    box-shadow: 0px 10px 15px rgba(51, 51, 51, 0.2);
    -webkit-box-shadow: 0px 10px 15px rgba(51, 51, 51, 0.2);
    -moz-box-shadow: 0px 10px 15px rgba(51, 51, 51, 0.2);
}

.mini_menu.active {
  
  right: 0px;
  transition: 0.5s;
}

.mini_logo{
    display:block;
    padding: 0px 0 0 0;
    width: 201px;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    position: absolute;
}
.mini_logo img{
  width: 100%;
}



.mini_menu_menu{
  margin: 0px 0 20px 0;
 
}
.mini_menu_menu>li{
  margin:0 auto;
  text-align: center;
  width: 100%;
}

.mini_menu_menu>li>a{
  font-size:18px;
  vertical-align: middle;
  padding:12px 15px;
  display:block;
  color: #4c4236;
  width:100%;
  margin:0 auto;
  text-align: center;
  border-bottom:#ddd 1px solid; 
  position: relative;
}

.mini_menu_menu>li:nth-child(1)>a{
  border-top:#ddd 1px solid;
}

.mini_menu_menu>li>a>span{
  position: absolute;
  right: 5%;
  top : 50%;
  transform:translateY(-50%);
}

.mini_menu ul li ul {
 display: none;
 padding: 0;
}



.mini_menu_menu>li>a>span {
    color: #4c4236;
    margin: 0 0 0 10px;
    font-weight: 700;
    font-size: 14px;
}

.mini_menu_menu ul li{
  
  
  
}
.mini_menu_menu ul li a{
  display: block;
  padding: 10px 30px;
  border-bottom: 1px #ddd solid;
  text-align: center;
  background-color: rgba(245, 245, 245, 0.8);
}

.menu_m_icon{
  position: absolute;
  right: 25px;
  top: 50%;
  transform:translateY(-50%);
}


.menu_m_icon a{
  display: inline-block;
  margin: 0 5px;
}

.menu_m_icon a img{
  width: 30px;
}

.i_b1_box li a span{
  display: none;

}

.i_b1_box li {
    width: calc(33% - 12px);
    margin: 0 5px;
}

.i_b1_box li a{
  border: 5px #fff solid;
}

.i_b1_box li a:hover{
  border: 5px #d5edf4 solid;
}

.i_b1_box li a h1,.i_b2_box li a h1 {
    bottom: 0;
    padding: 20px 10px 20px 10px;
    font-size: 16px;
}

.title_01 h1, .title_02 h1 {
    font-size: 20px;
}

.title_01 img,.title_02 img{
  width: 34px;
}

.title_01 h1:after,.title_02 h1:after{
  bottom: -10px;
}

.title_01,.title_02 {
    margin: 10px auto;
}

.i_box1 {
    margin: 20px auto;
}

.i_b1_box {
    margin: 30px auto;
}

.i_b2_box li {
    display: inline-block;
    width: calc(50% - 15px);
    margin: 0 5px;
}

.i_b2_box li a:hover {
    border: 5px #f6c8cd solid;
}
.i_b2_box li a {
    border: 5px #fff solid;
}

.pro_ul li h1 {
    font-size: 20px;
  }

.pro_ul li h2 {
    font-size: 22px;
    margin: 0px 0 10px 0;
  }

.pro_title {
    padding: 5px 20px;
    border-left: 5px #6dc8e2 solid;
    font-size: 20px;
}

.pro_ul li {
    margin: 10px 8px 30px 8px;
    width: calc(33% - 20px);
}

.flo_div {
    padding: 10px 5px;
}

.flo_div h1{
  font-size: 20px;
  padding: 0 0 8px 0;
}

.flo_div h2{
  font-size: 16px;
}

.flo_ul li{
  margin: 10px 8px 20px 8px;
  width: calc(33% - 20px);
}

.about_box1 {
    margin: 30px auto 30px auto;
}

.about_box1 h1 {
    font-size: 20px;
    padding: 0 0 10px 0;
}

.about_box1 h2 {
    font-size: 20px;
}

.about_box2 li h1 {
    font-size: 24px;
    padding: 0 0 5px 0;
}

.about_box2 li h2 {
    font-size: 18px;
    margin: 5px auto 20px auto;
}

.about_box2 li h3 {
    font-size: 14px;
    width: 90%;

}

.about_box2 li h2:after {
    bottom: -12px;

}  

.about_box3 {
    margin: 30px auto 10px auto;
}

.about_box3 h1 {
    font-size: 26px;
    padding: 0 0 0px 0;
}

.about_box3 h2 {
    font-size: 18px;
    margin: 5px auto 10px auto;
}

.about_box4 li h1 {
    font-size: 18px;
}

.about_box4 li h2 {
    font-size: 14px;
  }

.about_box4 {
    margin: 10px auto 40px auto;
}

.pro_left {
    width: calc(46% - 5px);
    margin: 10px 1%;
}

.pro_right h4 {
    padding: 13px 5px 13px 5px;
}

.pro_right h4 span {
    font-size: 35px;
    padding: 0px 7px 0px 7px;
}

.pro_box1 {
    padding: 5px 0 10px 0;
}

.pro_select {
    font-size: 16px;
    padding: 10px 5px;
    width: 160px;
}

.pro_add_box a img{
  width: 35px;
}

.news_box2 li {
    width: calc(33% - 6px);
    margin: 15px 2px;
    padding: 10px 5px;
}

.news_box2 h2 {
    font-size: 18px;
  }

.news_box2 h3 {
    margin: 8px 0 0 0;
    font-size: 16px;
    line-height: 24px;
}

.news_box2_img h1 {
    font-size: 12px;
    padding: 3px 5px;
}

.c_list_title li:nth-child(1),.c_list_test li:nth-child(1) {
    width: 100px;
}


.c_list_test li img {
    width: 70px;
}

.c_list_title{
  font-size: 14px;
}

.c_list_test {
    padding: 10px 0;
    font-size: 14px;
}

.c_list_test li input {
    width: 35px;
}

.cart_step h1{
  font-size: 14px;
}


.c_list_total ul li,.member_list_total ul li{
  font-size: 16px;
}

.cart2_input h2 {
    font-size: 16px;
    width: 100px;
}

.cart3_box h2 {
    font-size: 20px;
    padding: 15px 0 5px 0;
}

.cart3_box h3,.cart3_box h4 {

    font-size: 16px;
}

.member_title,.member_test,.member_list_title,.member_list_test{
  font-size: 14px;
}



.member_title li:nth-child(1),.member_test li:nth-child(1) {
    width: 110px;
}



.member_title li:nth-child(6),.member_test li:nth-child(6) {
    width: 90px;
}

.member_list_title li:nth-child(1),.member_list_test li:nth-child(1){
    width: 110px;
}

.member_list_title li:nth-child(6),.member_list_test li:nth-child(6) {
    width: 90px;
}

.i_b4_box {
    padding: 0 30px;
}

.i_box4 {
    margin: 0px auto;
    padding: 0px 0;
}

.pro_ul li {
    margin: 10px 8px 20px 8px;
    width: calc(50% - 20px);
}












}  

@media screen and (max-width: 700px) {
  .i_b1_box li {
    width: calc(100% - 12px);
    margin: 0 5px;
}
.i_b2_box li {
    width: 400px;
    margin: 0 5px;
    max-width: calc(100% - 12px);
}

.i_b3_box li {
    width: calc(100% - 15px);
}

.pro_ul li {
    margin: 10px 8px 30px 8px;
    width: calc(50% - 20px);
}

.flo_ul li{
  margin: 10px 8px 20px 8px;
  width: calc(50% - 20px);
}

.about_box2 li {
    width: 100%;
}

.about_box2 li h1 {
    padding: 30px 0 5px 0;
}

.about_box2 li h3 {
    margin: 0 auto 30px auto;
}

.about_box4 li {
    width: calc(33% - 5px);
    padding: 10px 5px;
}

.footer_test h1 a {
    font-size: 16px;
}

.footer_logo {
    margin: 0px auto 30px auto;
}
.footer_test h1 span {
    font-size: 16px;
    margin-right: 5px;
  }

.pro_left {
    text-align: center;
    width: 100%;
     margin: 10px 0;
}

.pro_left_box{
    width: 400px;
    margin: 10px auto;
    max-width: 95%;
}

.pro_right {
    width: 100%;
    margin: 0
}

.pro_test_box_ul li a {
    padding: 10px 20px;
    font-size: 14px;
}

.pro_test_box_ul li {
    margin-right: 4px;
}

.news_box2 li {
    width: calc(50% - 10px);
    margin: 10px 2px;
}

.page_box {
    margin: 20px auto 40px auto;
}

.news_box1 {
    margin: 30px auto;
}

.c_list_title li:nth-child(1), .c_list_test li:nth-child(1),.member_list_title li:nth-child(1), .member_list_test li:nth-child(1) {
    width: 60px;
}

.c_list_test li img,.member_list_test li img{
    width: 50px;
}

.c_list_title li:nth-child(2),.c_list_test li:nth-child(2),.member_list_title li:nth-child(2), .member_list_test li:nth-child(2) {
    width:calc(100% - 340px);
}

.c_list_title li:nth-child(3),.c_list_test li:nth-child(3),.member_list_title li:nth-child(3), .member_list_test li:nth-child(3) {
    width:50px
}

.c_list_title li:nth-child(4),.c_list_test li:nth-child(4),.member_list_title li:nth-child(4), .member_list_test li:nth-child(4) {
    width: 50px;
}

.c_list_title li:nth-child(5),.c_list_test li:nth-child(5),.member_list_title li:nth-child(5), .member_list_test li:nth-child(5) {
    width: 40px;
}

.c_list_title li:nth-child(6),.c_list_test li:nth-child(6),.member_list_title li:nth-child(6), .member_list_test li:nth-child(6) {
    width: 70px;
}


.c_list_title li:nth-child(7),.c_list_test li:nth-child(7),.member_list_title li:nth-child(7), .member_list_test li:nth-child(7) {
    width: 40px;
}

.c_list_test li input {
    padding: 3px 0;
}

.c_list_total ul li,.member_list_total ul li{
  font-size: 14px;
}

.c_list_total ul li:nth-child(1),.member_list_total ul li:nth-child(1)  {
    width: 100px;
    padding: 0 0 0 10px;
}

.c_list_total ul li:nth-child(2),.member_list_total ul li:nth-child(2)  {
    width: calc(100% - 110px);
    padding: 0 10px 0 0;
}

.cart_step li {
    margin: 0 10px;
    width: 95px;
}
.cart_step:after {
    width: 110px;
  }

.cart_step h1 {
    font-size: 12px;
}

.cart1_box1 h1 {
    padding: 10px 10px;
    font-size: 14px;
}

.pay_input {
    padding: 10px 15px;
    font-size: 16px;
}

.login_input {
    padding: 10px 20px;
}

.login_input input{
  width: calc(80% - 50px)
}

.cart2_input {
    padding: 10px 20px 10px 20px;
}

.cart2_input h2{
  display: block;
  padding: 0px 0 10px 0;
}

.c_input_1,.c_input_2,.c_input_3  {
   max-width: 100%;
}

.same_box {
    padding: 15px 0 15px 20px;
}

.login_box h1 {

    font-size: 20px;
    margin: 0 10px 20px 10px;
}

.login_box h2 {
    font-size: 16px;

}

.login_box input {
    font-size: 14px;
  }

.login_box {
    margin: 40px auto;
    width: 500px;
    max-width: 95%;
    border: 1px #ddd solid;
    border-radius: 5px;
    padding: 20px;
}

.login_a {
    padding: 6px 0;
    margin: 3px auto 0px auto;
    width: 80px;
    font-size: 16px;
}

.member_title li:nth-child(1), .member_test li:nth-child(1) {
    width: 90px;
}

.member_title li:nth-child(2),.member_test li:nth-child(2) {
    width: 110px;
}

.member_title li:nth-child(3),.member_test li:nth-child(3) {
    width: calc(100% - 430px);
}

.member_title li:nth-child(4),.member_test li:nth-child(4) {
    width: 70px
}

.member_title li:nth-child(5),.member_test li:nth-child(5) {
    width: 70px
}

.member_title li:nth-child(6),.member_test li:nth-child(6) {
    width: 70px;
}



.member_box h1 {
    font-size: 20px;
    margin: 0 0px 10px 0px;
}




.member2_box h2{
  width: 120px;
  font-size: 14px;
  padding: 7px 10px;
}

.member2_box h3{
  width: calc(100% - 130px);
  padding: 7px 0px;
  font-size: 14px;
}

.notice_test {
    padding: 10px 20px 30px 20px;

}

.l_code_get{
  font-size: 14px;
  padding-left:0px;
}

.login_box input {
    width: calc(100% - 110px);
}











}





@media screen and (max-width: 550px) {
.pro_ul li {
    margin: 10px 8px 20px 8px;
    width: calc(100% - 20px);
}

}

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

.mini_logo{
  width: 150px;
}

.menu_m_icon a img {
    width: 25px;
}

.menu_m_icon a {
    margin: 0 4px;
}

.menu_m_icon {
    right: 15px;
}

.title_01 h1, .title_02 h1 {
    font-size: 18px;
}

.title_01 img,.title_02 img{
  width: 30px;
}

.title_01 h1:after,.title_02 h1:after{
  bottom: -10px;
}

.title_01,.title_02 {
    margin: 10px auto;
}

.pro_ul li h1 {
    font-size: 18px;
    margin: 5px 0;
}

.pro_ul li h2 {
    font-size: 18px;
    margin: 0px 0 0px 0;
}

/*.pro_ul li {
    margin: 10px 8px 10px 8px;
    width: calc(50% - 20px);
}
*/
.flo_ul li{
  margin: 10px 8px 10px 8px;
  width: calc(100% - 20px);
}

.about_box4 li {
    width: calc(50% - 5px);
}

.about_box1 h1 {
    font-size: 18px;
    padding: 0 0 5px 0;
}

.about_box1 h2 {
    font-size: 18px;
}

.about_box3 h1 {
    font-size: 20px;
}

.about_box3 h2 {
    font-size: 14px;
    margin: 5px auto 10px auto;
}

.dis500{
  display: block;
}

.dis501{
  display: none;
}

.product_box {
    margin: 20px auto;
}

.p_list {
    margin: 30px 0 20px 0;
}

.pro_title {
    margin: 0 10px 10px 10px;
}

.news_d_box span{
  padding: 5px 8px;
}

.news_d_box h1 {
    font-size: 20px;
    padding: 0 90px 20px 10px;
  }

.login_input input{
  width: calc(100% - 100px);
  margin: 0px 0 10px 0;
}

.notice_test h2{
  font-size: 14px;
}

.agree_test label {
    font-size: 14px;

}

.cart_btn a {
    margin: 10px 10px;
}

.cart_box {

    margin: 30px auto;
}

.member_title, .member_test {
    font-size: 12px;
}

.member_title li:nth-child(1), .member_test li:nth-child(1) {
    width: 70px;
}

.member_title li:nth-child(2), .member_test li:nth-child(2) {
    width: 70px;
}

.member_title li:nth-child(3), .member_test li:nth-child(3) {
    width: calc(100% - 280px);
}


.member_title li:nth-child(4), .member_test li:nth-child(4) {
    width: 60px;
}

.member_title li:nth-child(5), .member_test li:nth-child(5) {
    width: 60px;
}

.member_title li:nth-child(6), .member_test li:nth-child(6) {
    width: 50px;
}

.member_box h2 {
    font-size: 14px;
}

.member2_box h2{
  width: 110px;
}

.member2_box h3{
  width: calc(100% - 120px);

}
.menu_m_icon a span {
    right: -8px;
    top: -5px;
    color: #FFF;
    width: 16px;
    height: 16px;
    padding: 0px;
}

}


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

.news_box2 li {
    width: 100%;
    margin: 10px 0px;
}

.c_list_title ,.c_list_test{
    font-size: 12px;
}



.c_list_title li:nth-child(1), .c_list_test li:nth-child(1),.member_list_title li:nth-child(1),.member_list_test li:nth-child(1) {
    width: 50px;
}

.c_list_test li img,.member_list_test li img {
    width: 40px;
}

.c_list_title li:nth-child(2),.c_list_test li:nth-child(2),.member_list_title li:nth-child(2),.member_list_test li:nth-child(2) {
    width:calc(100% - 283px);
}

.c_list_title li:nth-child(3),.c_list_test li:nth-child(3),.member_list_title li:nth-child(3),.member_list_test li:nth-child(3) {
    width:50px
}

.c_list_title li:nth-child(4),.c_list_test li:nth-child(4),.member_list_title li:nth-child(4),.member_list_test li:nth-child(4) {
    width: 40px;
}

.c_list_title li:nth-child(5),.c_list_test li:nth-child(5),.member_list_title li:nth-child(5),.member_list_test li:nth-child(5) {
    width: 35px;
}

.c_list_title li:nth-child(6),.c_list_test li:nth-child(6),.member_list_title li:nth-child(6),.member_list_test li:nth-child(6) {
    width: 50px;
}


.c_list_title li:nth-child(7),.c_list_test li:nth-child(7),.member_list_title li:nth-child(7),.member_list_test li:nth-child(7) {
    width: 30px;
}


.c_list_test li input {
    width: 25px;
}

}

@media screen and (max-width: 380px) {
.pro_ul li {
    width: calc(100% - 20px);
}

.about_box4 li {
    width: 100%;
}

.pro_add_box a {
    width: 95%;
    margin: 5px auto;
    text-align: center;
}

.pro_add_box {
    margin: 10px 0 0 0;
    text-align: center;
}

.pro_test_box_ul li a {
    padding: 10px 10px;
}

}