틀:ACUMain/styles.css

/*    호버 애니메이션    */

.ACUM-Imghover {
    filter:brightness(0.8);
    transition: filter 0.5s;
}
.ACUM-Imghover:hover {
    filter:brightness(1);
}
.ACUM-FLhover {
    filter:brightness(0.5);
    transition: filter 0.5s;
}
.ACUM-LFhover:hover {
    filter:brightness(1.0);
}

/*    이미지 애니메이션    */

.ACUM-imageAni1  {
 opacity: 0;
 animation: ACUM-imageAni1;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 3.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateX(0%);
}

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

.ACUM-imageAni2  {
 opacity: 0;
 animation: ACUM-imageAni2;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 4s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(0%);
}

@keyframes ACUM-imageAni2 {
  from {opacity: 0; transform: translateY(5%);}
  to {opacity: 1; transform: translateY(0%);}
}

/*    이미지    */
.ACUM-mainimg  {
 opacity: 0;
 animation: ACUM-mainimg;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 3.1s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

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

/*    배경    */

.ACUM-bgMain  {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #1a1a1f;
  display: inherit;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index:-3;
}

.ACUM-bg  {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #1a1a1f;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  overflow: hidden;
}

/*    호버 애니메이션    */

.ACUM-hoverA {
    filter:brightness(1) contrast(100%);
    transition: filter 0.5s;
}
.ACUM-hoverA:hover {
    filter:brightness(1.4) contrast(110%);
}

/*    메뉴 아이콘 서클    */

.ACUM-circle {
  position: absolute;
  align-items: center;
  justify-content: center;
  transform: translateX(10%) translateY(30%);
  margin: 0px;
  height: 70px;
  width: 70px;
  background-color: transparent;
  border-radius: 50%;
}

.ACUM-circle:before {
  position: absolute;
  align-items: center;
  justify-content: center;
  content: '';
  height: calc(100% + 10px); 
  width: calc(100% + 10px); 
  border: 2px dotted #ac9758;
  border-radius: inherit;
  animation: spin 15s linear infinite;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg); 
  }
}



/*    칸 CSS    */

.ACUM-MainBox {
	background: transparent;
	width:100%;
	margin:20px;
	display: inline-block;
}

.ACUM-SubBox{
  background: transparent;
  border-radius: 5em;
  width:100%;
  height: auto;
  color: white;
  cursor: pointer;
  line-height: 2em;
  display: inline-block;
}

.ACUM-box1{
  background: #2d2d32;
  border-radius: 0.25em;
  width:100%;
  color: white;
  line-height: 2em;
  margin:5px;
  display: flex;
  align-items: center;
  padding:1em;
  cursor: pointer;
  justify-content: center;
}

.ACUM-boxCF{
  background: #3f3f42;
  width:380px;
  color: white;
  line-height: 2em;
  padding: 1em;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  float: none;
}

@media screen and (max-width: 440px) {
     .ACUM-CF-Table {
     	width:100%;
     	margin:5px auto;
     }
}

@media screen and (min-width: 440px) {
     .ACUM-CF-Table {
     	width:440px;
     	margin:5px auto;
     }
}

.ACUM-CF-Titlecell {
	background:#ccc;
	color:#282828;
	text-align:center;
	font-size:11px;
	font-family:'GmarketSansMedium';
	letter-spacing:1px;
	padding:7px 7px;
	width:35%;
}

.ACUM-CF-Cell1 {
	width:65%;
	background:#eee;
	color:#777;
	text-align:left;
	font-size:10px;
	font-family:'GmarketSansMedium';
	padding:12px 20px;
	line-height:180%;
}

/*    텍스트 애니메이션    */

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

/*    # 모바일 반응성    */

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