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

/*********.trigger*************/
#bl #contents .trigger {
   cursor: pointer;
	position: relative;
	line-height: 0;
}
/*******************************/
#bl #contents .mask {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
	opacity: 1;
	transition: opacity .7s ease; 
}
#bl #contents .maskNone {
	opacity: 0;
	z-index: -1
}
#bl #contents .mask .credit {
	position: absolute;
    bottom: 3%;
    left: 5%;
}

@media only screen and (min-width: 768px)  {
	
}
/************************************************************
                toggle 
************************************************************/
#bl #contents .toggle {
	position: absolute;
    width: 15px;
    height: 15px;
    right: 12px;
    bottom: 21px;
    cursor: pointer;
    z-index: 100;
}
#bl #contents .toggle span {
  background-color: #fff;
  display: block;
  position: absolute;
}

#bl #contents .toggle span::before {
	height: 1px;
	width: 15px;
    top: 15px;
	background-color: #fff;
	display: block;
	position: absolute;
	content: '';
	-webkit-transition: .3s;
	transition: .3s;
	transform: rotateZ(90deg);
}
#bl #contents .toggle span::after {
	content: '';
	height: 1px;
	width: 15px;
	background-color: #fff;
	display: block;
	position: absolute;
	top: 15px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#bl #contents .toggle span.close {
	background-color: rgba(80, 80, 90, 0);
}

#bl #contents .toggle span.close:before {
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}
#bl #contents .toggle span.close:after {
	display: none;
}
@media only screen and (min-width: 768px)  {
	#bl #contents .toggle {
		width: 20px;
        height: 20px;
        bottom: 26px;
        right: 22px;
	}
	#bl #contents .toggle span::before {
		width: 20px;
		top: 15px;
	}
	#bl #contents .toggle span::after {
		width: 20px;
		top: 15px;
	}

}