@charset "UTF-8";
/* CSS Document */

#banner_3boxes{
  position: relative;
  bottom: 0;
  left:0;
  right: 0;
  background-color: #9c9e9f;
  background-color: rgba(156,158,159,0.8);
  z-index: 9999;
}

#banner_toggle_box{
  position: relative;
}
#banner_toggle_icon{
  position: absolute;
  width: 50px;
  top: -33px;
  right: 0px;
  padding-top: 10px;
  z-index: 99999;  
  background-color: #9c9e9f;
  background-color: rgba(156,158,159,0.8);
  border-radius: 25px 25px 0px 0px;
  cursor: pointer; 
}
#banner_toggle_icon p{
  position: relative;
  padding: 20px auto;
  text-align: center;
}
#banner_3boxes .banner_wrapper{width: 100%;max-width: 1180px;padding: 5px 15px;}
#banner_3boxes .banner_wrapper .col-1-3{padding:10px 10px;}
#banner_3boxes .banner_wrapper .col-1-3:hover .col-1-1.content{  background-color: #9c9e9f;}  
#banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content{
  position: relative;
  padding:10px 10px;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid #ffffff;
  border-radius: 7px;
  height: 50px; 
}
#banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content *{padding: 0;margin: 0;line-height: 1;position: relative;height: 100%;}
#banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_icon{
  position: absolute;
  width: 35px;
  height: 35px;
  top:10px;
  left: 10px;
  bottom: 10px;
  margin: auto;
}
#banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text{padding-left: 55px; }
#banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text h2{color: #ffffff;font-size: 24px;padding-right: 20px;}
#banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text p{
  color: #eb6a27;
  line-height: 1.1;
  padding-top: 3px;
  text-align: left;
  font-size: 0.8em;
}
@media all and (max-width: 1440px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1440px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1440px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1440px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1440px), only screen and (min-resolution: 192dpi) and (max-width: 1440px), only screen and (min-resolution: 2dppx) and (max-width: 1440px) {

}


@media all and (max-width: 1280px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1280px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1280px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1280px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1280px), only screen and (min-resolution: 192dpi) and (max-width: 1280px), only screen and (min-resolution: 2dppx) and (max-width: 1280px) {

}

@media all and (max-width: 1180px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1180px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1180px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1180px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1180px), only screen and (min-resolution: 192dpi) and (max-width: 1180px), only screen and (min-resolution: 2dppx) and (max-width: 1180px) {

}
/*TOUCH PANEL*/
@media all and (max-width: 1080px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1080px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1080px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1080px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1080px), only screen and (min-resolution: 192dpi) and (max-width: 1080px), only screen and (min-resolution: 2dppx) and (max-width: 1080px) {
}
/*END TOUCH PANEL*/
@media all and (max-width: 1024px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
}
@media all and (max-width: 960px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 960px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 960px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 960px), only screen and (min-device-pixel-ratio: 2) and (max-width: 960px), only screen and (min-resolution: 192dpi) and (max-width: 960px), only screen and (min-resolution: 2dppx) and (max-width: 960px) {
  /*
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_icon{width: 40px;height: 40px;}
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text{padding-left: 55px; }
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text h2{font-size: 18px;}
  */
}
/*IPAD MINI => 768x1024 px*/ 
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 768px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 768px), only screen and (min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min-resolution: 192dpi) and (max-width: 768px), only screen and (min-resolution: 2dppx) and (max-width: 768px) {
  #banner_3boxes{position: fixed;}
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_icon{width: 25px;height: 25px;} 
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text{padding-left: 40px; }
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text h2{font-size: 17px;}
}

@media all and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
  #banner_3boxes .banner_wrapper {padding: 0px 15px;}
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content {height: 40px;} 
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_icon{width: 30px;height: 30px;right:10px; bottom:10px;margin: auto;padding:0;}
  #banner_3boxes .banner_wrapper .col-1-3 .col-1-1.content .banner_text{ display: none;}
}
@media all and (max-width: 640px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 640px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 640px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 640px), only screen and (min-device-pixel-ratio: 2) and (max-width: 640px), only screen and (min-resolution: 192dpi) and (max-width: 640px), only screen and (min-resolution: 2dppx) and (max-width: 640px) {

}
@media all and (max-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 480px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 480px), only screen and (min-device-pixel-ratio: 2) and (max-width: 480px), only screen and (min-resolution: 192dpi) and (max-width: 480px), only screen and (min-resolution: 2dppx) and (max-width: 480px) {

}
@media all and (max-width: 320px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 320px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 320px), only screen and (min-device-pixel-ratio: 2) and (max-width: 320px), only screen and (min-resolution: 192dpi) and (max-width: 320px), only screen and (min-resolution: 2dppx) and (max-width: 320px) {
  
}