a:focus,
button:focus {
  outline: 0;
}

.newStep {
  padding: 90px 5% 0;
}

@media all and (max-width: 991px) {
  .newStep {
    padding: 70px 0 0;
  }
}

@media all and (max-width: 450px) {
  .newStep {
    padding: 50px 0 0;
  }
}

.newStep .step {
  padding: 15px 20px 15px 60px;
  display: inline-block;
  width: 100%;
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 5px #ff9c00,0 0 5px #ff9c00,0 0 5px #ff9c00 inset,0 0 5px #ff9c00 inset;
          box-shadow: 0 0 5px #ff9c00,0 0 5px #ff9c00,0 0 5px #ff9c00 inset,0 0 5px #ff9c00 inset;
  border-radius: 30px;
  margin-bottom: 30px;
  position: relative;
  font-size: 24px;
  letter-spacing: 1px;
}
.newStep .step.step-new{
  padding-left: 175px;
}
@media all and (max-width: 991px) {
  .newStep .step {
    font-size: 20px;
  }
}

@media all and (max-width: 450px) {
  .newStep .step {
    font-size: 4vw;
    letter-spacing: 0;
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 10px 10px 10px 40px;
  }

  .newStep .step.step-new{
    padding-left: 80px;
  }

}

.step.step--tag{
  margin-top: 50px;
}

.newStep .step:before {
  content: "";
  background-image: url(../images/trophy.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 60px;
  height: 90px;
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -10px;
}
.newStep .step-new:before{
  height: 90px;
  width: 165px;
  background-image: url(../images/trophy-n.png);
}
.newStep .step-flex{
display: flex;    
align-items: center;
}
.newStep .step-flex:before{
  top: 15px;
}
.newStep .step-flex .highline-title{
  font-size: 30px;
  display: inline;
  color: #fff;
  text-shadow: 0 0 10px #ff9c00, 0 0 10px #ff9c00;
  white-space: nowrap;
  padding-right: 10px;
}


.newStep .step small{ font-size: 16px;}
.newStep .step-flex span br{
  display: block !important
}

.tips-word p small{
  text-shadow: none;
  font-size: 16px;padding-left: 10px;
}
@media all and (max-width: 450px) {
  .newStep .step:before {
    width: 32px;
    height: 48px;
    top: 12px;

  }
  .newStep .step-new:before{
    height: 48px;
    width: 88px;
  } 
   .newStep .step-flex .highline-title{ font-size:5vw}
   .newStep .step-flex span br{display: none!important;}

   .newStep .step-flex:before{
top: 36%;
   }.step.step--tag{
    margin-top: 20px;
   }
}

.newStep .step--tag:after {
  content: "";
  background-image: url(../images/step03_tag.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 190px;
  height: 90px;
  display: inline-block;
  position: absolute;
  top: -65px;
  left: 21%;
}

@media all and (max-width: 991px) {
  .newStep .step--tag:after {
    width: 150px;
    height: 70px;
    top: -50px;
    left: 50%;
  }
}

@media all and (max-width: 450px) {
  .newStep .step--tag:after {
    width: 110px;
    height: 50px;
    top: -35px;
    left: 25%;
  }
}

.newStep .step span {
  color: #fff;
}

.newStep .step span br {
  display: none;
}

@media all and (max-width: 450px) {
  .newStep .step span {
    display: block;
  }
}

.set_wrapper {
  display: inline-block;
  width: 100%;
}

.set_wrapper .set_in {
  width: 33.33%;
  float: left;
  text-align: center;
}

@media all and (max-width: 450px) {
  .set_wrapper .set_in {
    width: 100%;
  }
}

.set_wrapper .set_in p {
  margin: 0 5%;
  font-size: 18px;
}

@media all and (max-width: 450px) {
  .set_wrapper .set_in p {
    font-size: 4vw;
  }
}

.set_wrapper .set_in p span {
  color: #fff;
  text-shadow: 0 0 10px #ff9c00,0 0 10px #ff9c00;
}

.set_wrapper .set_in a:hover {
  text-decoration: none;
}

@media all and (max-width: 450px) {
  .set_wrapper .set_in .do_step {
    width: 30%;
  }
}

.set_wrapper .set_in .go_note {
  margin-top: 10px;
  display: block;
}

.set_wrapper .set_in .go_note span {
  color: #fff;
  text-shadow: 0 0 10px #f7d11d,0 0 10px #f7d11d;
  font-size: 18px;
  position: relative;
}

@media all and (max-width: 450px) {
  .set_wrapper .set_in .go_note span {
    font-size: 4vw;
    text-shadow: 0 0 4px #f7d11d,0 0 4px #f7d11d;
  }
}

.set_wrapper .set_in .go_note span:before {
  content: '';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(../images/icon_question.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 4px;
  left: -4px;
}

.set_wrapper .set_in .go_note span:after {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  background: url(../images/icon_triangle.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: -2px;
  right: -8px;
}

.set_wrapper .set_btn_active {
  background-image: url(../images/set_btn_active.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 26px;
  letter-spacing: 4px;
  padding: 40px 55px 40px 45px;
  max-width: 280px;
  margin: 0 auto;
}

@media all and (max-width: 450px) {
  .set_wrapper .set_btn_active {
    background-image: url(../images/set_btn_active_m.png);
    max-width: 100%;
    font-size: 18px;
    padding: 20px 55px 20px 45px;
    margin-bottom: 10px;
  }
}

.set_wrapper .set_btn_not {
  background-image: url(../images/set_btn_not.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, 0.5);
  font-size: 26px;
  letter-spacing: 4px;
  padding: 40px 55px 40px 45px;
  max-width: 280px;
  margin: 0 auto;
  cursor: default;
}

@media all and (max-width: 450px) {
  .set_wrapper .set_btn_not {
    background-image: url(../images/set_btn_not_m.png);
    max-width: 100%;
    font-size: 18px;
    padding: 20px 55px 20px 45px;
    margin-bottom: 10px;
  }
}

.set_wrapper .set_btn_not:hover {
  text-decoration: none;
}

.show {
  display: block !important;
}

.hide {
  display: none !important;
}

.locked {
  overflow: hidden !important;
}

.highline {
  display: inline;
  color: #fff;
  text-shadow: 0 0 10px #ff9c00,0 0 10px #ff9c00;
}

.highline_g{
  color: #fff;
  text-shadow: 0 0 10px #ff9c00,0 0 10px #ff9c00;
}

.popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  z-index: 999;
}

.popup .popup_cont {
  width: 80vw;
  height: 40vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 20px 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #e8ccff;
  -webkit-box-shadow: 0 0 20px #01cefa, 0 0 20px #01cefa, 0 0 20px #01cefa inset;
          box-shadow: 0 0 20px #01cefa, 0 0 20px #01cefa, 0 0 20px #01cefa inset;
}

@media all and (min-width: 1480px) {
  .popup .popup_cont {
    width: 60vw;
    height: 40vw;
  }
}

@media all and (max-width: 991px) {
  .popup .popup_cont {
    width: 90vw;
    height: 90vh;
  }
}

@media all and (max-width: 450px) {
  .popup .popup_cont {
    padding: 20px;
  }
}

.popup .popup_close {
  position: absolute;
  top: 10px;
  right: 30px;
  color: #fff;
  opacity: 0.6;
  font-size: 2.2em;
  -webkit-transform: scaleX(1.2);
          transform: scaleX(1.2);
  z-index: 10;
}

@media all and (max-width: 991px) {
  .popup .popup_close {
    font-size: 1.8em;
  }
}

@media all and (max-width: 450px) {
  .popup .popup_close {
    font-size: 8vw;
    top: 5px;
    right: 15px;
  }
}

.popup .popup_close:hover {
  text-decoration: none;
}

.popup .popup_cont_in {
  height: 100%;
  width: 100%;
  left: 0;
  padding: 30px 50px;
  margin: 0;
  overflow-y: auto;
  font-size: 18px;
}

@media all and (min-width: 1480px) {
  .popup .popup_cont_in {
    font-size: 20px;
  }
}

@media all and (max-width: 450px) {
  .popup .popup_cont_in {
    padding: 10px 10px;
    font-size: 4.5vw;
    margin: 0;
    width: 100%;
  }
}

@media all and (min-width: 1024px) {
  .wrap .activity02-item {
    background-size: 100% 100%;
  }
}

.wrap .activity02-item .activity02-list li p {
  color: #fff;
}

.hami_point-list .list_img {
  width: 80%;
  padding-bottom: 100%;
  background-image: url("../images/section7-img02_origin.png");
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  -webkit-transition: all;
  transition: all;
}

.hami_point-list:nth-child(2) .list_img {
  background-image: url("../images/section7-img03_origin.png");
}

.hami_point-list:nth-child(3) .list_img {
  background-image: url("../images/section7-img01_origin.png");
}

.hami_point-list:hover:nth-child(1) .list_img {
  background-image: url("../images/section7-img02_hover.png");
}

.hami_point-list:hover:nth-child(2) .list_img {
  background-image: url("../images/section7-img03_hover.png");
}

.hami_point-list:hover:nth-child(3) .list_img {
  background-image: url("../images/section7-img01_hover.png");
}

.point_part {
  width: 100%;
  padding: 5% 5% 0%;
}

@media all and (max-width: 450px) {
  .point_part {
    padding: 5% 0 0%;
  }
}

.point_part .point_subject {
  text-align: center;
  margin-bottom: 50px;
}

@media all and (max-width: 450px) {
  .point_part .point_subject {
    margin-bottom: 30px;
  }
}

.point_part .point_subject img {
  width: 70%;
  display: block;
  margin: 0 auto;
}

@media all and (max-width: 450px) {
  .point_part .point_subject img {
    width: 80%;
  }
}

.point_part .point_subject p {
  color: #fff;
  font-size: 24px;
  margin-top: 30px;
}

@media all and (max-width: 450px) {
  .point_part .point_subject p {
    font-size: 4vw;
  }
}

.point_part .point_box {
  text-align: center;
  margin-bottom: 50px;
}

.point_part .point_box .point_topic {
  padding: 5px 20px;
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 10px #ff9c00,0 0 10px #ff9c00;
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 5px #ff9c00,0 0 5px #ff9c00,0 0 5px #ff9c00 inset;
          box-shadow: 0 0 5px #ff9c00,0 0 5px #ff9c00,0 0 5px #ff9c00 inset;
  font-size: 24px;
  border-radius: 20px;
  margin-bottom: 20px;
}

@media all and (max-width: 450px) {
  .point_part .point_box .point_topic {
    font-size: 4.5vw;
    border-radius: 10px;
  }
}

.point_part .point_box .point_item {
  color: #fff;
}

.point_part .point_box .point_item a:hover {
  text-decoration: none;
}

.point_part .point_box .point_item img {
  max-width: 80%;
  margin: 0 auto;
}

.point_part .point_box .point_item .point_title {
  font-size: 1.3em;
  line-height: 1.3em;
  letter-spacing: 1px;
  margin: 10px auto;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 2;*/
  -webkit-box-orient: vertical; 
}

@media all and (max-width: 450px) {
  .point_part .point_box .point_item .point_title {
    font-size: 4.3vw;
  }
}

.point_part .point_box .point_item .point_value {
  font-size: 1.3em;
  line-height: 1.3em;
  letter-spacing: 1px;
  margin: 10px auto;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.point_part .point_box .point_item .point_value span {
  font-size: 1.5em;
  color: #fff;
}

@media all and (max-width: 450px) {
  .point_part .point_box .point_item .point_value {
    font-size: 4.3vw;
  }
}

.point_part .point_box .slide-arrow {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  z-index: 100;
}

.point_part .point_box .slide-arrow.prev-arrow {
  border: 0;
  background-color: transparent;
  outline: 0;
  top: 50%;
  left: -70px;
  width: 60px;
  height: 60px;
  display: inline-block;
  background-image: url(../images/arrow_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media all and (min-width: 1480px) {
  .point_part .point_box .slide-arrow.prev-arrow {
    left: -80px;
  }
}

@media all and (max-width: 1024px) {
  .point_part .point_box .slide-arrow.prev-arrow {
    left: -55px;
    width: 45px;
    height: 45px;
  }
}

@media all and (max-width: 991px) {
  .point_part .point_box .slide-arrow.prev-arrow {
    left: -25px;
  }
}

@media all and (max-width: 450px) {
  .point_part .point_box .slide-arrow.prev-arrow {
    left: -20px;
    width: 40px;
    height: 40px;
    top: 58%;
  }
}

.point_part .point_box .slide-arrow.next-arrow {
  border: 0;
  background-color: transparent;
  top: 50%;
  right: -70px;
  width: 60px;
  height: 60px;
  display: inline-block;
  background-image: url(../images/arrow_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media all and (min-width: 1480px) {
  .point_part .point_box .slide-arrow.next-arrow {
    right: -80px;
  }
}

@media all and (max-width: 1024px) {
  .point_part .point_box .slide-arrow.next-arrow {
    right: -55px;
    width: 45px;
    height: 45px;
  }
}

@media all and (max-width: 991px) {
  .point_part .point_box .slide-arrow.next-arrow {
    right: -25px;
  }
}

@media all and (max-width: 450px) {
  .point_part .point_box .slide-arrow.next-arrow {
    right: -20px;
    width: 40px;
    height: 40px;
    top: 58%;
  }
}

.step_part {
  margin-top: 30px;
}

.step_part .step_item {
  width: 50%;
  float: left;
  padding: 15px;
}

@media all and (max-width: 450px) {
  .step_part .step_item {
    width: 100%;
    float: none;
  }
}

.step_part .step_item img {
  width: 100%;
}

.step_part .step_item p {
  color: #fff;
  letter-spacing: 1px;
  margin: 20px 5% 0;
}

@media all and (max-width: 450px) {
  .step_part .step_item p {
    font-size: 4vw;
  }
}
/*# sourceMappingURL=style.css.map */

/* fresco */

.fr-close-background{
  background-color: transparent !important;
}

.fr-close-background, .fr-close-icon {
  transform: scale(2);
}

.fr-stroke-color{
  background: transparent !important;
}

.fr-content-background{
  background: transparent !important;
}

.fr-position-outside{
  display: none !important;
}

.fr-info-padder{
  display: none !important;
}