@charset "UTF-8";

/* ------------------------------------------
	1
--------------------------------------------- */
.myModal_popUp,
input[name="myModal_switch"],
#myModal_open + label ~ label {
  display: none;
}
.myModal{
  margin:5px 0;
  padding:5px 0;
}
#myModal_open + label{
    margin: 0 37px;
    padding: 18px;
    text-align: center;
    display: block;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    border: dashed 2px #ff999f;/*点線*/
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    transition: .4s;
}
#myModal_open + label:hover{
  transition-property: background-color;
  background-color: #f7d4d6;
}

#myModal_close-button + label {
  cursor: pointer;
}

.myModal_popUp {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open:checked ~ #myModal_close-button + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open:checked + label ~ .myModal_popUp {
  background: #fff;
  border-radius: 10px;
  display: block;
  width: 90%;
  height: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
  margin-top: 40px;
}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content h3 {
display: inline-block;
box-shadow: 0px -6px 5px -5px #ff5500 inset,0px 8px 4px -8px #ff3311;
}


#myModal_open:checked + label + #myModal_close-overlay + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open:checked ~ #myModal_close-button + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}
#myModal_open:checked ~ #myModal_close-button + label::before {
  content: '×';
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  border: dashed 2px #ff999f;/*点線*/
  padding: 3px 5px;
}
#myModal_open:checked ~ #myModal_close-button + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media(min-width:600px) and (max-width:959px){
  #myModal_open:checked + label ~ .myModal_popUp {
    width: 600px;
    height: 400px;
  }
  #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
    height: calc(100% - 20px);
  }
  #myModal_open:checked ~ #myModal_close-button + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open:checked ~ #myModal_close-button + label::after {
    display: none;
  }
}
@media(min-width:768px) {
  #myModal_open:checked + label ~ .myModal_popUp {
    width: 700px;
    height: 400px;
  }
  #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
    height: calc(100% - 20px);
  }
  #myModal_open:checked ~ #myModal_close-button + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open:checked ~ #myModal_close-button + label::after {
    display: none;
}
}
@media(max-width:599px){
 #myModal_open + label{
   font-size: 15px;
   padding: 18px 0px;
   margin: 0px 15px;
}

#myModal_open:checked ~ #myModal_close-button + label {
  display: block;
  background: #fff;
  text-align: center;
  margin: auto;
  line-height: 44px;
  width: 50%;
  height: 44px;
  position: fixed;
  top:80%;
  bottom: 18%;
  left: 30%;
  z-index: 999;
}

#myModal_open:checked + label ~ .myModal_popUp {
  width: 90%;
  height: 75%;

}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
  margin: auto;
  margin-top: 60px;
}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content h3 {
  margin: 0px 15px;
}
}


  /* ------------------------------------------
	2
--------------------------------------------- */

  .myModal_popUp2,
input[name="myModal_switch2"],
#myModal_open2 + label ~ label {
  display: none;
}
.myModal2{
  margin:5px 0;
  padding:5px 0;
}
#myModal_open2 + label{
    margin: 0 37px;
    padding: 18px;
    text-align: center;
    display: block;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    border: dashed 2px #ff999f;/*点線*/
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    transition: .4s;
}
#myModal_open2 + label:hover{
  transition-property: background-color;
  background-color: #f7d4d6;
}

#myModal_close-button2 + label {
  cursor: pointer;
}

.myModal_popUp2 {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open2:checked ~ #myModal_close-button2 + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open2:checked + label ~ .myModal_popUp2 {
  background: #fff;
  border-radius: 10px;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
}


#myModal_open2:checked + label ~ .myModal_popUp2 > .myModal_popUp-content2 {
  margin-top: 40px;
}

#myModal_open2:checked + label ~ .myModal_popUp2 > .myModal_popUp-content2 h3 {
display: inline-block;
box-shadow: 0px -6px 5px -5px #ff5500 inset,0px 8px 4px -8px #ff3311;
}


#myModal_open2:checked + label + #myModal_close-overlay2 + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open2:checked ~ #myModal_close-button2 + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}
#myModal_open2:checked ~ #myModal_close-button2 + label::before {
  content: '×';
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  border: dashed 2px #ff999f;/*点線*/
  padding: 3px 5px;
}
#myModal_open2:checked ~ #myModal_close-button2 + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media(min-width:600px) and (max-width:959px){
  #myModal_open2:checked + label ~ .myModal_popUp2 {
    width: 600px;
    height: 400px;
  }
  #myModal_open2:checked + label ~ .myModal_popUp2 > .myModal_popUp-content2 {
    height: calc(100% - 20px);
  }
  #myModal_open2:checked ~ #myModal_close-button2 + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open2:checked ~ #myModal_close-button2 + label::after {
    display: none;
  }
}

@media(min-width:768px) {
  #myModal_open2:checked + label ~ .myModal_popUp2 {
    width: 700px;
    height: 400px;
  }
  #myModal_open2:checked + label ~ .myModal_popUp2 > .myModal_popUp-content2 {
    height: calc(100% - 20px);
  }
  #myModal_open2:checked ~ #myModal_close-button2 + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open2:checked ~ #myModal_close-button2 + label::after {
    display: none;
}
}

@media(max-width:599px){
 #myModal_open2 + label{
   font-size: 15px;
   padding: 18px 0px;
   margin: 0px 15px;
}

#myModal_open2:checked ~ #myModal_close-button2 + label {
  display: block;
  background: #fff;
  text-align: center;
  margin: auto;
  line-height: 44px;
  width: 50%;
  height: 44px;
  position: fixed;
  top:80%;
  bottom: 15%;
  left: 30%;
  z-index: 999;
}

#myModal_open2:checked + label ~ .myModal_popUp2 {
  width: 90%;
  height: 75%;

}

#myModal_open2:checked + label ~ .myModal_popUp2 > .myModal_popUp-content2 {
  margin: auto;
  margin-top: 60px;
}

#myModal_open2:checked + label ~ .myModal_popUp2 > .myModal_popUp-content2 h3 {
  margin: 0px 15px;
}
}

  /* ------------------------------------------
	3
--------------------------------------------- */
.myModal_popUp3,
input[name="myModal_switch3"],
#myModal_open3 + label ~ label {
  display: none;
}
.myModal3{
  margin:5px 0;
  padding:5px 0;
}
#myModal_open3 + label{
    margin: 0 37px;
    padding: 18px;
    text-align: center;
    display: block;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    border: dashed 2px #ff999f;/*点線*/
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    transition: .4s;
}
#myModal_open3 + label:hover{
  transition-property: background-color;
  background-color: #f7d4d6;
}

#myModal_close-button3 + label {
  cursor: pointer;
}

.myModal_popUp3 {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open3:checked ~ #myModal_close-button3 + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open3:checked + label ~ .myModal_popUp3 {
  background: #fff;
  border-radius: 10px;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
}

#myModal_open3:checked + label ~ .myModal_popUp3 > .myModal_popUp-content3 {
  margin-top: 40px;
}

#myModal_open3:checked + label ~ .myModal_popUp3 > .myModal_popUp-content3 h3 {
display: inline-block;
box-shadow: 0px -6px 5px -5px #ff5500 inset,0px 8px 4px -8px #ff3311;
}

#myModal_open3:checked + label + #myModal_close-overlay3 + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open3:checked ~ #myModal_close-button3 + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}
#myModal_open3:checked ~ #myModal_close-button3 + label::before {
  content: '×';
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  border: dashed 2px #ff999f;/*点線*/
  padding: 3px 5px;
}
#myModal_open3:checked ~ #myModal_close-button3 + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media(min-width:600px) and (max-width:959px){
  #myModal_open3:checked + label ~ .myModal_popUp3 {
    width: 600px;
    height: 400px;
  }
  #myModal_open3:checked + label ~ .myModal_popUp3 > .myModal_popUp-content3 {
    height: calc(100% - 20px);
  }
  #myModal_open3:checked ~ #myModal_close-button3 + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open3:checked ~ #myModal_close-button3 + label::after {
    display: none;
}
}

@media(min-width:768px) {
  #myModal_open3:checked + label ~ .myModal_popUp3 {
    width: 700px;
    height: 400px;
  }
  #myModal_open3:checked + label ~ .myModal_popUp3 > .myModal_popUp-content3 {
    height: calc(100% - 20px);
  }
  #myModal_open3:checked ~ #myModal_close-button3 + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open3:checked ~ #myModal_close-button3 + label::after {
    display: none;
}
}

@media(max-width:599px){
  #myModal_open3 + label{
    font-size: 15px;
    padding: 18px 0px;
    margin: 0px 15px;
 }
 
 #myModal_open3:checked ~ #myModal_close-button3 + label {
  display: block;
  background: #fff;
  text-align: center;
  margin: auto;
  line-height: 44px;
  width: 50%;
  height: 44px;
  position: fixed;
  top:80%;
  bottom: 20%;
  left: 30%;
  z-index: 999;
}

#myModal_open3:checked + label ~ .myModal_popUp3 {
  width: 90%;
  height: 75%;

}

#myModal_open3:checked + label ~ .myModal_popUp3 > .myModal_popUp-content3 {
  margin: auto;
  margin-top: 60px;
}
}

/* ------------------------------------------
	4
--------------------------------------------- */
.myModal_popUp4,
input[name="myModal_switch4"],
#myModal_open4 + label ~ label {
  display: none;
}
.myModal4{
  margin:5px 0;
  padding:5px 0;
}
#myModal_open4 + label{
    margin: 0 37px;
    padding: 18px;
    text-align: center;
    display: block;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    border: dashed 2px #ff999f;/*点線*/
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    transition: .4s;
}
#myModal_open4 + label:hover{
  transition-property: background-color;
  background-color: #f7d4d6;
}

#myModal_close-button4 + label {
  cursor: pointer;
}


#myModal_open4 + label:hover{
  transition-property: background-color;
  background-color: #f7d4d6;
}

#myModal_close-button4 + label {
  cursor: pointer;
}


.myModal_popUp4 {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open4:checked ~ #myModal_close-button4 + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open4:checked + label ~ .myModal_popUp4 {
  background: #fff;
  border-radius: 10px;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
}

#myModal_open4:checked + label ~ .myModal_popUp4 > .myModal_popUp-content4 {
  margin-top: 40px;
}


#myModal_open4:checked + label ~ .myModal_popUp4 > .myModal_popUp-content4 h3 {
display: inline-block;
box-shadow: 0px -6px 5px -5px #ff5500 inset,0px 8px 4px -8px #ff3311;
}

#myModal_open4:checked + label + #myModal_close-overlay4 + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open4:checked ~ #myModal_close-button4 + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}



#myModal_open4:checked ~ #myModal_close-button4 + label::before {
  content: '×';
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  border: dashed 2px #ff999f;/*点線*/
  padding: 3px 5px;
}
#myModal_open4:checked ~ #myModal_close-button4 + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media(min-width:600px) and (max-width:959px){
  #myModal_open4:checked + label ~ .myModal_popUp4 {
    width: 600px;
    height: 400px;
  }
  #myModal_open4:checked + label ~ .myModal_popUp4 > .myModal_popUp-content4 {
    height: calc(100% - 20px);
  }
  #myModal_open4:checked ~ #myModal_close-button4 + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open4:checked ~ #myModal_close-button4 + label::after {
    display: none;
}
}

@media(min-width:768px) {
  #myModal_open4:checked + label ~ .myModal_popUp4 {
    width: 700px;
    height: 400px;
  }
  #myModal_open4:checked + label ~ .myModal_popUp4 > .myModal_popUp-content4 {
    height: calc(100% - 20px);
  }
  #myModal_open4:checked ~ #myModal_close-button4 + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 63%;
    margin-left: 240px;
    
    overflow: hidden;
  }
  #myModal_open4:checked ~ #myModal_close-button4 + label::after {
    display: none;
}
}

@media(max-width:599px){
 #myModal_open4 + label{
   font-size: 15px;
   padding: 18px 0px;
   margin: 0px 15px;
}

#myModal_open4:checked ~ #myModal_close-button4 + label {
  display: block;
  background: #fff;
  text-align: center;
  margin: auto;
  line-height: 44px;
  width: 50%;
  height: 44px;
  position: fixed;
  top:95%;
  bottom: 8%;
  left: 30%;
  z-index: 999;
}

#myModal_open4:checked + label ~ .myModal_popUp4 {
  margin: 40px 0px 40px;
  width: 90%;
  height: 85%;

}

#myModal_open4:checked + label ~ .myModal_popUp4 > .myModal_popUp-content4 {
  margin: auto;
  margin: 40px 0px 60px;
}

#myModal_open4:checked + label ~ .myModal_popUp4 > .myModal_popUp-content4 h3 {
  font-size: 15px;
  margin: 0px 15px;
}
}