diff --git a/global/_common.scss b/global/_common.scss
index e674d86..5fc6585 100644
--- a/global/_common.scss
+++ b/global/_common.scss
@@ -20,12 +20,16 @@
 	}
 }
 
-%hidden {
+.di_none {
 	display: none;
 }
 
-.hide {
-	@extend %hidden;
+.op_hide {
+	opacity: 0;
+}
+
+.op_show {
+	opacity: 1;
 }
 
 .space_even_auto {
diff --git a/global/_config.scss b/global/_config.scss
index 7c8143c..226edd8 100644
--- a/global/_config.scss
+++ b/global/_config.scss
@@ -223,6 +223,8 @@ $duration_double: $duration_basic * 2;
 $duration_long: 2s !default;
 $timing_basic: ease-out !default;
 $transition_best: flex 500ms cubic-bezier(0, 0, 0.2, 1.4), background 800ms ease;
+$transition_hide: opacity $duration_long;
+$transition_show: opacity $duration_double;