틀:Imyunakitof/styles.css

/*   # 등장 애니메이션   */

.IMA-mainimg  {
 opacity: 0;
 animation: IMA-mainimg;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.2s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes IMA-mainimg {
  from {opacity: 0;}
  to {opacity: 1;}
}

.IMA-maintext  {
 opacity: 0;
 animation: IMA-maintext;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.2s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(0%);
}

@keyframes IMA-maintext {
  from {opacity: 0; transform: translateY(-20%);}
  to {opacity: 1; transform: translateY(0%);}
}

.IMA-maintext1  {
 opacity: 0;
 animation: IMA-maintext2;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.2s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(0%);
}

.IMA-maintext2  {
 opacity: 0;
 animation: IMA-maintext2;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.4s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(0%);
}

.IMA-maintext3  {
 opacity: 0;
 animation: IMA-maintext2;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.6s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(0%);
}

@keyframes IMA-maintext2 {
  from {opacity: 0; transform: translateY(-2%);}
  to {opacity: 1; transform: translateY(0%);}
}

.IMA-subtext  {
 opacity: 0;
 animation: IMA-subtext;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.2s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateX(0%);
}

@keyframes IMA-subtext {
  from {opacity: 0; transform: translateX(-2%);}
  to {opacity: 1; transform: translateX(0%);}
}

/*    # 모바일 반응성    */

@media screen and (min-width: 700px) {
	.IM-PO-WebDisplay {
    	display:inherit;
	}
}
@media screen and (min-width: 700px) {
	.IM-PO-MobileDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.IM-PO-WebDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.IM-PO-MobileDisplay {
    	display:inherit;
	}
}

/*    # CSS 일반    */

.IM-PO-z  {
 z-index:2;
}

.IM-PO-BW  {
 filter: grayscale(100%);
}

.invert-template{
	filter: invert(100%);
}

.IM-Newsimg img {
	height:150px;
	width:100%;
	object-fit: cover;
	object-position: center top;
}

.IM-Newsimg1 img {
	height:150px;
	width:100%;
	object-fit: cover;
	object-position: center center;
}

.IM-Newsimg2 img {
	height:150px;
	width:100%;
	object-fit: cover;
	object-position: center bottom;
}

/*    # 반응 애니메이션    */

.IM-NotImg {
    filter:brightness(0.9);
    box-shadow:0px 0px 4px rgba(0,0,0,0);
    transition: filter 0.5s, box-shadow 0.5s;
}
.IM-NotImg:hover {
    box-shadow:0px 0px 7px rgba(92, 255, 206,1);
    filter:brightness(1.2);
}

.IM-NotImg2 {
    box-shadow:0px 0px 4px rgba(0,0,0,0);
    transition:box-shadow 0.5s;
}
.IM-NotImg2:hover {
    box-shadow:0px 0px 7px rgba(92, 255, 206,1);
}
.IM-NotImg2 .IM-NotImg3 {
    filter:brightness(0.9);
    transition: filter 0.5s;
}
.IM-NotImg2:hover .IM-NotImg3 {
    filter:brightness(1.2);
}

.IM-NotImg4 {
    filter:brightness(0.9);
    transition: filter 0.5s;
}
.IM-NotImg4:hover {
    filter:brightness(1.2);
}

.IM-NotImg6 {
}

.IM-NotImg6 .IM-NotImg5 {
    filter:brightness(0.9);
    transition: filter 0.5s;
}
.IM-NotImg6:hover .IM-NotImg5 {
    filter:brightness(1.2);
}