/*
    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;
 /* position: absolute; */
 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)
}

#colorbox {
 outline: 0;
}

#cboxContent {
 background: #fff;
 height: 100% !important;
}

.cboxIframe {
 background: #fff;
}

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

#cboxLoadedContent {
 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 {
 position: absolute;
 bottom: 47.5%;
 left: -2.2%;
 margin-top: -32px;
 background: transparent url(../../images/common/arrow_left_b.png) center 50% no-repeat;
 -webkit-background-size: 100%;
 background-size: 100%;
 width: 40px;
 height: 40px;
 text-indent: -9999px;
}


#cboxNext {
 position: absolute;
 bottom: 47.5%;
 right: -2.2%;
 margin-top: -32px;
 background: transparent url(../../images/common/arrow_right_b.png) center 50% no-repeat;
 -webkit-background-size: 100%;
 background-size: 100%;
 width: 40px;
 height: 40px;
 text-indent: -9999px;
}


#cboxClose {
 position: absolute;
 top: 19px;
 right: 16px;
 display: block;
 background: url(../../images/staff/close_btn_br.png) no-repeat center center;
 -webkit-background-size: 40px;
 background-size: 40px;
 width: 38px;
 height: 30px;
 text-indent: -9999px;
}






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





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