틀:임시/styles.css

/*    배경    */

.ACUM-bgMain  {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image:linear-gradient(45deg, rgba(9,9,9,1) 0%, rgba(40,40,40,1) 7%, rgba(6,6,6,1) 46%, rgba(58,234,211,1) 72%, rgba(141,234,134,1) 82%, rgba(0,0,0,1) 100%);
  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%);
}

/*    칸 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%);}
}

.more-button {
    background:linear-gradient(45deg, rgba(58,234,211,1) 0%, rgba(141,234,134,1) 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 30px;
    width:100px;
    height:50px;
    text-align:center;
    display: grid;
    place-items: center;
}

.more-button2 {
    background:linear-gradient(45deg, rgba(58,234,211,1) 0%, rgba(141,234,134,1) 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 30px;
    width:80px;
    height:30px;
    text-align:center;
    display: grid;
    place-items: center;
}

.ACUM-N-BOX{
	opacity: 1;
    background:rgba(32, 32, 32, 0.7);
    cursor: pointer;
    height: 310px;
    max-width: 200px;
    width: 200px;
    margin:5px auto;
    position:relative;
    justify-content:left;
    overflow: hidden;
    border-radius:20px;
}

.ACUM-N-img {
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
    z-index:1;
}

.ACUM-P-BOX-T{
	opacity: 1;
    background:rgba(32, 32, 32, 0.7);
    cursor: pointer;
    height: 180px;
    max-width: 400px;
    width: 400px;
    position:relative;
    justify-content:left;
    overflow: hidden;
    border-radius:20px 20px 0px 0px;
}

.ACUM-P-BOX-B{
	opacity: 1;
    background:#e5e5e5;
    cursor: pointer;
    height: 90px;
    max-width: 400px;
    width: 400px;
    justify-content:left;
    overflow: hidden;
    border-radius:0px 0px 20px 20px;
    display: grid;
    place-items: center;
}

.ACUM-M-BOX{
	opacity: 1;
    background:#fff;
    cursor: pointer;
    height: 70px;
    max-width: 400px;
    width: 400px;
    margin:5px auto;
    position:relative;
    justify-content:left;
    overflow: hidden;
    border-radius:20px;
}

.ACUM-P-BOX-footer {
    color: #fff;
    align-items: center;
    padding:10px;
    margin:10px auto;
    width: 100%;
}

.more-button:hover {
	border:1px solid #fff;
}

.more-button2:hover {
	border:1px solid #fff;
}

/*    # 모바일 반응성    */

@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;
	}
}