body{height:100%;}
ul{list-style: none; }
ul li{padding:0; margin:0}
.ul_in{padding-left:20px;}

h2.title{font-size:24px; font-weight:400; letter-spacing: -2px; padding-bottom:20px;}
.info{padding:10px; border:1px solid #ccc; font-size:14px; background:#f1f1f1; line-height:20px;}
.blue{color:#0073b4;}
.pop_btn{padding:5px; border-radius: 5px; background:#3394dd; color:#fff; width:180px; height:35px; line-height:24px;font-size:12px; text-align: center;margin-top:15px; margin-bottom:10px; cursor: pointer; display:block;}
.mon_title{margin-top:20px;font-size:16px; font-weight: bold; border-top:3px solid #ddd;border-bottom:3px solid #ddd; padding:20px;}
.mon_title li{line-height:30px; font-weight:normal;}
.mon_title li span{font-size:12px}
.final_date{text-align:left; border:1px solid #ff0000; margin:0; paddgin:0}

.mt10{margin-top:10px}
.mb10{margin-bottom:10px}
.ra10{border-radius:10px;}
.rightmm{position:relative;left: 94%}
.right2{float:right; margin-top:-20px}
.line_all{width:100%; height:1px; background:#dfdfdf; margin-top:20px;}

.box{border:1px solid #ccc; padding:10px;}
.box_no_border{border:none;}
.box_type1{font-size:14px; color:#3394dd; font-weight:bold}
.help_box{padding:3px 10px; background:#3394dd; color:#fff; font-size:12px; border-radius: 5px;display:inline-block;margin-left: 20px;cursor: pointer;}
.qu{margin:25px 0; font-weight:bold;  font-size:14px; }
a.rese{display:inline-block; position:relative; top:-50px;left:85%; border-radius: 5px; border:1px solid #3394dd; background:#fff; color:#3394dd; padding:5px 10px; cursor:pointer;}
a.rose:hover{background:#3394dd; color:#fff;}
button.rese{display:inline-block; position:relative; top:-50px;left:85%; border-radius: 5px; border:1px solid #3394dd; background:#fff; color:#3394dd; padding:5px 10px; cursor:pointer;}
button.rose:hover{background:#3394dd; color:#fff;}

/**********************modal*********************/
.trigger2,.trigger3,.trigger4,.trigger5,.trigger6,.trigger7, .trigger8, .trigger11, .trigger12, .trigger13, .trigger14, .trigger15, .trigger16, .trigger17, .trigger18, .trigger19, .trigger20, .trigger21{cursor: pointer;}

.page-wrapper {
  width: 100%;
 }

.blur-it {
  filter: blur(4px);
}

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
 background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}


.modal-wrapper1, .modal-wrapper2 , .modal-wrapper3, .modal-wrapper4, .modal-wrapper5, .modal-wrapper6, .modal-wrapper7, .modal-wrapper8, .modal-wrapper9, .modal-wrapper10,
.modal-wrapper11, .modal-wrapper12, .modal-wrapper13, .modal-wrapper14, .modal-wrapper15, .modal-wrapper16, .modal-wrapper17, .modal-wrapper18, .modal-wrapper19, .modal-wrapper20, .modal-wrapper21, .modal-wrapper22, .modal-wrapper23{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
 background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper1.open, .modal-wrapper2.open, .modal-wrapper3.open, .modal-wrapper4.open, .modal-wrapper5.open, .modal-wrapper6.open, .modal-wrapper7.open, .modal-wrapper8.open, .modal-wrapper9.open, .modal-wrapper10.open,
.modal-wrapper11.open, .modal-wrapper12.open, .modal-wrapper13.open, .modal-wrapper14.open, .modal-wrapper15.open, .modal-wrapper16.open, .modal-wrapper17.open , .modal-wrapper18.open, .modal-wrapper19.open, .modal-wrapper20.open, .modal-wrapper21.open, .modal-wrapper22.open, .modal-wrapper23.open{
  opacity: 1;
  visibility: visible;
}


.modal {
  width: 600px;
  height: 400px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index:100;
}

.modal2{
	width:600px;
	height:200px;
	 display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index:100;
}
.modal3{
	width:600px;
	height:600px;
	 display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index:100;
}
.modal4{
	width:600px;
	height:900px;
	 display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index:100;
}

.modal_new {
  width: 600px;
  height: auto;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index:100;
}

@media(max-width:620px){
h2.title{font-size:18px; font-weight:400; letter-spacing: -2px; padding-bottom:20px;}
a.rese{display:inline-block; position:relative; top:-10px;left:80%;}
a.rose:hover{background:#3394dd; color:#fff;}
.modal {
  
  width: 400px;
  height: 383px;
  display: block;
  margin: 50% 0 0 -65%;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.modal2 {
  
  width: 400px;
  height: 150px;
  display: block;
  margin: 50% 0 0 -65%;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal_new {
  width: 400px;
  height: auto;
  display: block;
  margin: 50% 0 0 -65%;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.head { 
max-width:85%;
  /*max-width: 400px;*/
  height: 20px;
  padding: 7px 15px;
  overflow: hidden;
}
.ccontent {
  background:#fff;

 /* max-width: 400px;*/
  max-height:430px;
  padding:10px;
  overflow-x :hidden;
  overflow-y :auto;

}
.ccontent img{width:100%}

}/*media 600*/


@media(max-width:380px){
h2.title{font-size:16px}
a.rese{display:inline-block; position:relative; top:-10px;left:75%;}
a.rose:hover{background:#3394dd; color:#fff;}
.modal {
  
  width: 320px;
  height: 360px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.modal2 {
  
  width: 320px;
  height: 200px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal_new {
  
  width: 320px;
  height: auto;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.head { 
  
  max-width: 260px;
  height: 20px;
  padding: 7px 15px;
  overflow: hidden;
}
.ccontent {
  
  max-width: 300px;
  max-height:280px;
  padding:10px;
  overflow-y :auto;

}
.ccontent img{width:100%}

}
/*media 380*/




@media(max-width:280px){

.modal {
  
  width: 220px;
  height: 360px;
  display: block;
  margin: 50% 0 0 -310px;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal_new {
  
  width: 220px;
  height: auto;
  display: block;
  margin: 50% 0 0 -310px;
  position: relative;
  top: 50%; 
  left: 320px;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.head { 
 
  max-width: 280px;
  height: 20px;
  padding:5px 2px;
  text-align:left;
 
  overflow: hidden;
  font-size:13px;
 display: inline-block;
}

.btn-close {
  width:20px;
  height:20px;
  display: inline-block;
  float:right;
  cursor: pointer;
}
.ccontent {
 
  width:108%;
  max-height:380px;
  padding:10px;
  overflow-y :auto;

}
.ccontent img{width:100%}

}
/*media 280*/


.modal-wrapper1.open .modal, .modal-wrapper2.open .modal, .modal-wrapper3.open .modal,.modal-wrapper4.open .modal,.modal-wrapper5.open .modal,.modal-wrapper6.open .modal,.modal-wrapper7.open .modal,.modal-wrapper8.open .modal, .modal-wrapper9.open .modal,.modal-wrapper10.open .modal,
.modal-wrapper11.open .modal, .modal-wrapper12.open .modal, .modal-wrapper13.open .modal,.modal-wrapper14.open .modal,.modal-wrapper15.open .modal,.modal-wrapper16.open .modal,.modal-wrapper17.open .modal,.modal-wrapper18.open .modal,.modal-wrapper19.open .modal, .modal-wrapper20.open .modal, .modal-wrapper21.open .modal, .modal-wrapper22.open .modal, .modal-wrapper23.open .modal {
  margin-top: -200px;
  opacity: 1; 
}

.modal-wrapper1.open .modal2, .modal-wrapper2.open .modal2, .modal-wrapper3.open .modal2,.modal-wrapper4.open .modal2,.modal-wrapper5.open .modal2,.modal-wrapper6.open .modal2,.modal-wrapper7.open .modal2,.modal-wrapper8.open .modal2,.modal-wrapper9.open .modal2,.modal-wrapper10.open .modal2, 
.modal-wrapper11.open .modal2, .modal-wrapper12.open .modal2, .modal-wrapper13.open .modal2,.modal-wrapper14.open .modal2,.modal-wrapper15.open .modal2,.modal-wrapper16.open .modal2,.modal-wrapper17.open .modal2,.modal-wrapper18.open .modal2,.modal-wrapper19.open .modal2, .modal-wrapper20.open .modal2, .modal-wrapper21.open .modal2, .modal-wrapper22.open .modal2, .modal-wrapper23.open .modal2 {
  margin-top: -200px;
  opacity: 1; 
}

.modal-wrapper23.open .modal_new {
  margin-top: -400px;
  opacity: 1; 
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1; 
}

.head { 
  width: 90%;
  height: 25px;
  padding: 12px 30px;
  overflow: hidden;
  background: #3394dd;
  color:#fff;
}

.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
  cursor: pointer;
}

.ccontent {
/*  width:577px;*/
  height:82%;
  padding:10px;
  overflow-y :auto;

}

.good-job {
 padding:10px;
  color: #555;
}