.img-pc{display: block;}
.img-iphone{display: none;}
.act_content_1 img{width: 100%;max-width: 100%;}
.act_content_1{display: flex;flex-wrap: wrap;}
.act_text_5,.act_text_9{display: none;}
.act_list{flex-direction: column;margin: 0 20px 0 0;width: calc(25% - 14px);display: flex;}
.act_list3{width: calc(50% - 14px);}
.act_list .act_img_list .act_on.img-pc{display: block;opacity: 0;}
.act_list .act_img_list .act_on.img-iphone{display: none;}
.act_list .act_img_list:hover .act_off{/*transform: translateY(-100%);transform-origin: center bottom 0;*/opacity: 0;} 
.act_list .act_img_list:hover .act_on.img-pc{opacity: 1;}
.act_list .act_img_list .act_off{display: block;position: absolute;left: 0;top: 0;width: 100%;opacity: 1;transform: translateY(0) rotateX(0);transition: all 0.4s ease-in-out 0s;}
.act_content_1 .act_list3{margin: auto;}
.act_list1 .act_text_1{height: 18.75%;display: flex;align-items: flex-end;padding-bottom: 20px;margin: auto 0;}
.act_list1 .act_text_list{height: 15.625%;display: flex;align-items: flex-start;padding-bottom: 20px;margin: auto 0;}
.act_list1 .act_img_list{display: flex;height: 65.625%;position: relative;overflow: hidden;}
.act_list2 .act_img_list{height: 34.375%;display: flex;padding: 0 0 20px;position: relative;overflow: hidden;}
.act_list2 .act_img_list:last-child{padding: 0;height: 31.25%;}
.act_list3 .act_img_list1{height: 68.75%;display: block;padding-bottom: 20px;position: relative;overflow: hidden;}
.act_list3 .act_img_list2{width: 50%;position: relative;overflow: hidden;}

.act_list3 .act_warp{display: flex;height: 31.25%;align-items: flex-end;}
.act_warp .act_text_4{margin: auto;padding: 20px 40px;height: 12.5%;display: block;width: 50%;}


.act_content_2 .circum-product {
  padding: 0;
  background-color: #ffd532;
  border-radius: 20px;
  overflow: hidden;
}
.act_content_2 .product-info {
  padding: 20px 20px 0;
}
.product-nav {
  background-color: #ff7e00;
}
.product-nav-text {
  width: calc(16.667% - 10px);
  max-width: 256.56px;
  position: relative;
  margin: 0;
  font-size: 16px;
  border: none;
  padding: 0 5px;
  border-radius: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: inherit;
  text-align: center;
  color: #fff;
  background-color: transparent;
}
.product-nav-text.on {
  border: none;
  box-shadow: none;
}
.product-nav-text:hover {
  background-color: transparent;
  color: #fff;
  border: none;
  box-shadow: none;
}
.product-nav-text.on {
  background-color: #ffd532;
  color: #363636;
}
.product-nav-text:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 50%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: #fff;
}
.product-nav-text:first-child:after, .product-nav-text.on:after, .product-nav-text.on + .product-nav-text:after {
  display: none;
}
.product-nav-fixed {
  width: calc(100% - 40px);
  max-width: 100%;
  display: flex;
  justify-content: center;
  padding: 8px 20px;
  background-color: rgba(255, 126, 0, 0.9);
}
.product-nav-fixed .product-nav-text {
  border-radius: 30px;
}
.act_content_2 {
  width: 100%;
  max-width: 100%;
}
@media only screen and (max-width: 1400px) {
  .product-nav-fixed {margin: 0;}
  .act_title{width: calc(100% - 20px);}
  .act_list .act_img_list .act_on.img-pc{opacity: 1;}
}
@media only screen and (max-width: 1025px) {
  .act_main img{border-radius: 10px;}
  .act_list .act_img_list .act_off{display: none;}
}
@media only screen and (max-width: 1000px) {
  .product-nav {
    padding: 0;
  }
  .product-nav-fixed  {
    padding: 8px 20px;
  }
  .act_content_2 .product-info{padding: 20px 0 0;}
}
@media only screen and (max-width: 767px) {
  .act_list .act_img_list .act_on.img-pc{display: none;}
  .act_list .act_img_list .act_on.img-iphone{display: block;}
  .act_content_1{width: calc(100% - 30px);}
  .product-nav {
    width: calc(100% - 30px);
    padding: 15px 15px 0;
    background-color: transparent;
  }
  .product-nav-text {
    width: auto;
    height: 30px;
    font-size: 14px;
    padding: 0 20px;
    margin-right: 10px;
    border-radius: 30px;
    border: 1px solid #363636;
    background-color: transparent;
    color: #363636;
  }
  .product-nav-text:after {
    display: none;
  }
  .product-nav-text:hover {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    text-decoration: none;
  }
  .product-nav-text.on {
    background-color: #ff7e00;
    border: 1px solid #ff7e00;
    color: #fff;
  }
  .product-nav-fixed {
    justify-content: start;
    padding: 8px 15px;
    background-color: rgba(255, 213, 50, 0.9);
  }
  .circum-more {
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    border: 1px solid #fff;
    margin: 0 auto 10px;
  }

  .act_title {
    width: calc(100% - 30px);
    font-size: 18px;
  }
  .act_list1 .act_text_1,.act_list1 .act_text_list{display: none;}
  .act_list1{order: 2;width: calc(50% - 5px);margin: 0;display: block;position: absolute;left: 0;top: 0;}
  .act_content_1{width: calc(100% - 30px);display: flex;position: relative;margin: 0 auto 20px;}
  .act_content_1 .act_list3{margin: auto;order: 3;width: auto;flex-direction: row;}
  .act_list3 .act_img_list1{height: auto;display: block;padding-bottom: 10px;width: calc(50% - 5px);}
  .act_list3 .act_warp{display: flex;height: auto;align-items: flex-end;width: calc(50% - 5px);margin: 0 0 10px 10px;}
  .act_list2{width: auto;margin: auto;order: 1;flex-direction: row-reverse;flex-wrap: wrap;}
  .act_list2 .act_img_list{height: auto;padding: 0;margin: 0 10px 10px 0;width: calc(50% - 5px);display: block;}
  .act_list2 .act_img_list:nth-child(1){margin: 0 0 10px 10px;}
  .act_list2 .act_img_list:nth-child(2n+2){margin: 0 0 10px 10px;}
  .act_list2 .act_img_list:last-child{height: auto;margin: 0 0 10px;}
  .act_list1 .act_img_list{height: auto;display: block;width: auto;}
  .act_warp .act_text_4{display: none;}
  .act_list3 .act_img_list2{width: auto;}
  .act_text_5{display: block;padding: 0 15px;margin: auto;text-align: center;font-size: 20px;}
  .act_text_9{display: block;text-align: center;display: block;padding: 0 15px 15px;margin: auto;}
  .act_content_2 .circum-product {
    border-radius: 0;
  }
  .act_content_2 .product-info {
    padding: 15px 0 0 0;
    margin: 0 0 0 15px;
  }
}