/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/




#colorbox,
#cboxOverlay,
#cboxWrapper {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 9999;
 -webkit-transform: translate3d(0, 0, 0);
}








#cboxWrapper {
 max-width: none;
}

#cboxOverlay {
 position: fixed;
 width: 100%;
 height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft {
 clear: left;
}

#cboxContent {
 position: relative;
}

#cboxLoadedContent {
 overflow: auto;
 -webkit-overflow-scrolling: touch
}

#cboxTitle {
 margin: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
 cursor: pointer;
}

.cboxPhoto {
 float: left;
 margin: auto;
 border: 0;
 display: block;
 max-width: none;
 -ms-interpolation-mode: bicubic;
}

.cboxIframe {
 width: 100%;
 height: 100%;
 display: block;
 border: 0;
 padding: 0;
 margin: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
 box-sizing: content-box;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition-duration: inherit;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.47, 0, .74, .71)
}

#cboxContent {
  max-width: 1100px;
  margin: 130px auto 0 auto;
  background: #fff;
}

.cboxIframe {
 background: #fff;
}

#cboxError {
 padding: 50px;
 border: 1px solid #ccc;
}

#cboxLoadedContent {
  max-width: 1100px;
  margin: 0 auto;
  border: 0px solid #000;
  background: #fff;
}

#cboxTitle {
 position: absolute;
 top: -20px;
 left: 0;
 color: #ccc;
}

#cboxCurrent {
 display: none !important;
}

#cboxLoadingGraphic {
 background: url(images/loading.gif) no-repeat center center;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
 border: 0;
 padding: 0;
 margin: 0;
 overflow: visible;
 width: auto;
 background: none;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {
 outline: 0;
}

#cboxSlideshow {
 position: absolute;
 top: -20px;
 right: 90px;
 color: #fff;
}

#cboxPrevious {
  display: none !important;
}


#cboxNext {
display: none !important;
}


#cboxClose {
 position: absolute;
 bottom: -20px;
 right: 48.5%;
 display: block;
 background: transparent url(../../images/recruit/icon_modal.png) center 50% no-repeat;
 -webkit-background-size: 100%;
 background-size: 100%;
 width: 38px;
 height: 38px;
 text-indent: -9999px;
}






#cboxClose:hover {
background-position: bottom center;
}





/***** SP add style *****/

@media screen and (max-width: 768px), print {
  #cboxClose {
    position: absolute;
    bottom: -58px;
    right: 44%;
    display: block;
    background: transparent url(../../images/recruit/icon_modal.png) center 50% no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    width: 38px;
    height: 38px;
    text-indent: -9999px;
  }




  /*
  #cboxOverlay {
    background-image: url(../../images/recruit/icon_modal.png);
    background-repeat: no-repeat;
    background-position: 50% 95%;
    -webkit-background-size: 38px;
    background-size: 38px;
  }
  */


  /*
  #cboxOverlay {
    margin: 80px 0 0 0;
  }
  */


  


}