.header {
  height: 80px;
  width: 100%;
  background-color: white;
  position:fixed;
  top:0;
  z-index:10;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, white, rgb(0, 102, 255));
  border-image-slice: 1;
}

.header ul{
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 150px;
}
.header li {
  list-style: none;
  float: left;
  padding-right: 23px;
}

.title {
  color: black;
}
.baipas-title {
  color: rgb(0, 102, 255);
}

.header li:hover{
  color: rgb(0, 102, 255);
}

.header-container {
  width: 100%;
  height: 230px;
  margin-top: 80px;
  background-image: url(img1/background3.png);
}
header2 h1 {
  background-color: rgba(255,255,255,0.7);
  width: 330px;
}

.map {
  float: left;
  margin-right: 3px;
}

.header-right {
  float: right;
  margin-top: 75px;
  background-color: rgba(255,255,255,0.7);
  width: 350px;
}

ul {
  list-style: none;
}

h2 {
  background: linear-gradient(to right, red, orange);
  width: 100%;
  color: white;
}

a {
  text-decoration: none;
}

.btn-container {
  width: 450px;
  margin: 0 auto;
}


.btn {
  color:#fff;
  padding: 3px 6px;
  display: inline-block;
  background-color: rgb(0, 102, 255);
  border-radius: 4px;
}

.btn:hover{
  background-color: rgba(0, 102, 255, 0.8);
  
}

.skyblue {
  color: skyblue;
  font-weight: bold;
}
.red {
  color: red;
  font-weight: bold;
}
.td {
  padding-right: 2px;
  padding-left: 2px;
}


.price1 {
  width: 430px;
  margin: 0 auto;
}
.price2 {
  width: 430px;
  margin: 0 auto;
}

.green{
  background-color: rgb(80, 255, 0);
  color: #fff;
}
.blue{
  background-color: rgb(0, 100, 255);
  color: #fff;
}
.black{
  background-color: rgb(10, 10, 30);
  color: #fff;
}

.size {
  width: 430px;
}


.back{
  color: rgb(0, 102, 255);
}

.calendar-container {
  width: 500px;
  margin: 0 auto;
  border-radius: 5px;
  background: #f6f5f4;
  color: #1a1a1a;
  }
  main h1 {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 24px;
  margin: 0;
  padding: 0;
  }
  .calendar {
  padding: 0 30px 30px 30px;
  }
  table {
  width: 100%;
  }
  th, td {
  text-align: center;
  padding: 10px;
  }
  th {
  font-weight: normal;
  font-size: 14px;
  }
  a{
  text-decoration: none;
  }
  td {
  font-weight: bold;
  }
  .day *:first-child {
  color: #ff838b;
  }
  .day *:last-child {
  color: #6fb5ff;
  }
  .day *:last-child {
  color: #1a1a1a;
  }

  form {
    width: 250px;
    margin: 0 auto;
  }

.grey {
  color: #dedede;
}

.today {
  font-weight: bold;
}

.info {
  list-style: disc;
}

.flow {
  width: 400px;
  margin: 0 auto;
}  
.flow-container {
  width: 450px;
  margin: 0 auto;
  background-color: #efefef;
}  

footer{
  width: 100%;
  height: 155px;
  background-color: #174a5c;
  color: white;
  text-align: center;
 
}


footer li{
  color: white;
}

footer li:hover{
  color: yellow;
}

footer .link:hover{
  color: yellow;
}

.link {
  margin: 0;
}

ul.footer-menu li {
display: inline;
}

ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
}
.cp_cont {
	height: 65vh;
}
.cp_offcm01 {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-block;
}
/* menu */
.cp_offcm01 .cp_menu {
	position: fixed;
	top: 0;
	right: -100vw;
	width: 250px;
	height: 100%;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #607D8B;
	opacity: 0.8;
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 0.5em;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #333333;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-250px);
	        transform: translateX(-250px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'FontAwesome';
	content: '\f0c9';
	font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}
/* contents */
.cp_contents {
	color: #333333;
	text-align: center;
}
.back{
  color: #fff;
}

.grey {
  color: rgba(20,20,20,0.3);
}

  @media all and (min-width: 1001px) {
    .cp_cont {
     display: none;
   }
  }  
  @media all and (max-width: 1000px) {
     .header-menu{
       display: none;
     }
   
   
   .header h1 {
     font-size: 20px;
     float: left;
   }
   
   
   .cp_cont {
     float: right;
   }
   
   ol, ul {
     list-style: none;
   }
   a {
     text-decoration: none;
     color: inherit;
   }
   .cp_cont {
     height: 65vh;
   }
   .cp_offcm01 {
     position: absolute;
     top: 20px;
     right: 20px;
     display: inline-block;
   }
   /* menu */
   .cp_offcm01 .cp_menu {
     position: fixed;
     top: 0;
     right: -100vw;
     width: 250px;
     height: 100%;
     cursor: pointer;
     -webkit-transition: 0.53s transform;
             transition: 0.53s transform;
     -webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
             transition-timing-function: cubic-bezier(.38,.52,.23,.99);
     background-color: white;
     opacity: 1;
     z-index: 15;
   }
   .cp_offcm01 .cp_menu ul {
     margin: 0;
     padding: 0;
   }
   .cp_offcm01 .cp_menu li {
     list-style: none;
   }
  
   .cp_offcm01 .cp_menu li a:hover {
     color:  rgb(0, 102, 255);
   }
  
   .cp_offcm01 .cp_menu li a {
     display: block;
     padding: 20px;
     text-decoration: none;
     color:black;
     border-bottom: 1px solid black;
   }
   
   .cp_mobilebar {
     display: block;
     z-index: 5;
     position: fixed;
     top: 0;
     left: 0;
     padding: 0 25px;
     width: 100%;
     height: 80px;
     background-color: rbga(255, 255, 255, 0.1);
     
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     }
   
   .cp_menuicon {
     display: block;
     position: relative;
     width: 25px;
     height: 100%;
     cursor: pointer;
     -webkit-transition: transform .3s ease-in;
     transition: transform .3s ease-in;
     }
     .cp_menuicon > span {
     display: block;
     position: absolute;
     top: 55%;
     margin-top: -0.3em;
     width: 100%;
     height: 0.2em;
     border-radius: 1px;
     background-color: black;
     -webkit-transition: transform .3s ease-in;
     transition: transform .3s ease-in;
     
     }
     .cp_menuicon > span:before, .cp_menuicon > span:after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 1px;
     background-color: black;
     -webkit-transition: transform .3s ease;
     transition: transform .3s ease;
     }
     
  
   .cp_menuicon > span:before {
     -webkit-transform: translateY(-0.6em);
     transform: translateY(-0.6em);
     }
     .cp_menuicon > span:after {
     -webkit-transform: translateY(0.6em);
     transform: translateY(0.6em);
     }
     #cp_toggle01:checked + .cp_mobilebar .cp_menuicon {
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     }
     #cp_toggle01:checked + .cp_mobilebar span:before,
     #cp_toggle01:checked + .cp_mobilebar span:after {
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
     }
  
   .cp_offcm01 #cp_toggle01:checked ~ label::before {
     content: '\f00d';
   }
   /* contents */
   .cp_contents {
     color: #333333;
     text-align: center;
   }
  }
  
  
  @media all and (max-width: 610px) {

    .calendar-container {
      width: 80%;
  }

  .flow-container{
    width: 80%;
  }

  .flow {
    width: 80%;
    margin: 0 auto;
  }

  h3{
    font-size: 17px;
  }
  p {
    width: 85%;
    margin: 0 auto;
  }
  .btn-container {
    width: 300px;
    margin: 0 auto;
  }
  .btn {
    margin-bottom: 5px;
  }
}
  @media all and (max-width: 450px) {

    .calendar {
      width: 70%;
      margin: 0 auto;
  }

  .price1 {
    width: 80%;
    margin: 0 auto;
  }
  .price2 {
    width: 80%;
    margin: 0 auto;
  }
  
}