아로스 CSS

CSS _ Ver.240521

- 폰트 사이즈 크기 확대

 

 

/* 아로스 강의 #1 */
.center {text-align: center; padding-top: 50px}

/* 아로스 강의 #2 */
.aros-footer {
	@include tablet {
		padding: 26px 0;
		margin-bottom: 70px;
	}

	@include mobile {
		padding: 30px 20px;
	}

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 53px 0;
	background-color: rgb(54, 54, 52);

	.aros-footer-inner {
		width: var(--inner-width);

		@include tablet {
			width: 100%;
			max-width: var(--mobile-inner-width);
		}

		.aros-footer-logo {
			width: 104px;
			height: auto;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.aros-footer-section01 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			@include tablet {
				flex-direction: column;
				align-items: flex-start;
			}

			.aros-content {
				@include tablet {
					font-size: 12px;
				}

				opacity: 0.7;
				font-family: 'SUIT Regular';
				font-size: 13px;
				line-height: 1.62;
				letter-spacing: -0.13px;
				text-align: left;
				color: #fff;
				margin-top: 10px;
				opacity: 0.6;
			}

			.aros-sns-link {
				color: rgb(243, 28, 28);
				font-family: 'SUIT Regular';
				font-size: 13px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				column-gap: 10px;
				cursor: pointer;

				@include tablet {
					margin-top: 10px;
				}

				.aros-footer-dot {
					width: 3px;
					height: 3px;
					border-radius: 50%;
					background-color: white;
				}
			}
		}

		.aros-footer-section02 {
			.end-bar {
				border-top: 1px solid white;
				opacity: 0.2;
				margin-top: 25px;
			}

			.aros-footer-fixed {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: 'SUIT Light';
				font-size: 12px;
				opacity: 0.5;
				color: rgb(245, 155, 155);
				margin-top: 25px;

				@include tablet {
					flex-direction: column;
					align-items: flex-start;
				}

				.aros-footer-aros100-warp {
					display: flex;
					justify-content: space-between;
					width: 220px;
					align-items: center;

					@include tablet {
						margin-bottom: 5px;
						font-size: 12px;
					}

					.aros-aros100-icon {
						cursor: pointer;
					}
				}
			}
		}
	}
}

/* 아로스-반응형표 */
	.card-container {
      width: 90%;
      margin: 20px auto; /* Set margin to 20px on top and bottom, auto on left and right */
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      grid-auto-rows: minmax(80px, auto);
      gap: 10px; /* Optional: Adjust the gap between cards */
      justify-content: center;
      background-color: #fff; /* Set background color for the card container */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle box shadow */
      border-radius: 15px; /* Increased border-radius for a more rounded appearance */
      position: relative;
      z-index: 1; /* Set a higher z-index to ensure it appears above other elements */
    }

    .card {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px;
      position: relative;
      border: 1px solid #d1e780;
      background-color: #f9f9f9; /* Set background color for the card */
      cursor: pointer; /* Add a pointer cursor for interaction */
      transition: background-color 0.3s ease, transform 0.3s, box-shadow 0.3s;
      border-radius: 15px; /* Increased border-radius for a more rounded appearance */
      transform: translateY(-5px); /* Initial pop-out effect */
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); /* Initial box-shadow for pop-out effect */
    }

    .card:hover {
      background-color: #dee9b6; /* Change background color on hover */
      transform: translateY(-10px); /* Further pop-out effect on hover */
    }

    @media (max-width: 768px) {
      .card-container {
        width: 100%; /* Set to 100% for full-width container */
      }

      .card {
        padding: 15px; /* Adjusted padding */
      }
    }

/* 아로스-로딩 */
#aros-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 1022222;
    text-align: center;
    display: table;
    width: 100%;
    height: 100vh;
    opacity: 0.8;
}

.aros-loader{
	display:table-cell;
	vertical-align:middle;
}

.aros-loader img{
	width:150px;
}

@media screen and (max-width:768px) {
	.aros-loader img{width:20%;
	}
}

/* 아로스-사이드바 광고 */
.aros-sidead {
  width: 160px;
  height: 600px;
  margin-top: 20px;
  position: fixed;
  top: 50%;
  right: -210px;
  transform: translateY(-50%);
  transition: right 0.3s;
  display: none;
}

@media (min-width: 1930px){
  .aros-sidead {
    width: 280px;
  }}

/* Adjusted style for window sizes between 1035 and 1460 */
@media (min-width: 1035px) and (max-width: 1560px) {
  .aros-sidead {
    transform: translateY(-5%);
  }
}

/* 아로스-목차 */
.aros-toc {
border: 1px solid #ccc;
padding: 10px 0px 0px 15px;
background-color: #ffffff;
}

.aros-toc ul {
list-style-type: decimal;
}

.aros-toc p {
font-weight: 550;
margin-bottom: 7px;
}

#toc * {
font-size: 20px;
color: rgb(72, 75, 248);
}

#toc a {
color: rgb(72, 75, 248);
}

#toc a:hover {
color: rgb(245, 167, 219);
}

#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}

#toc > li {
color: rgb(5, 9, 221);	
margin-bottom: 15px;
}

#toc {
margin-left: 3px;
}

#toc > li > ul li {
margin-bottom: 5px !important;
}

.toc-center {text-align: center; padding-top: 10px}

/* 목차 스타일 종료 - TOC */

@media (max-width: 767px){
.hidden-xs {
    display: none!important;
}}
@media (min-width: 768px) and (max-width: 991px){
.hidden-sm {
    display: none!important;
}}
@media (min-width: 992px) and (max-width: 1199px){
.hidden-md {
    display: none!important;
}}
@media (min-width: 1200px){
.hidden-lg {
    display: none!important;
}}

/* 아로스 모바일 어플 형식(css) */
.container_postbtn { display: none }

@media (max-width: 1024px)
.aros-bottom-menu {
    display: flex;
}

.aros-bottom-menu {
    display: none;
    background: var(--arosbottommenu-bgcolor);
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    justify-content: space-around;
    padding: var(--arosbottommenu-wrapper-padding);
    box-shadow: 0 -5px 10px rgb(0 0 0 / 10%);
    z-index: var(--arosbottommenu-zindex);
    transition: all 200ms;
}

.aros-bottom-menu-icon-wrapper {
    position: relative;
    line-height: 0;
}

.aros-bottom-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    flex: 1;
    font-size: var(--arosbottommenu-font-size);
    text-decoration: none;
    color: var(--arosbottommenu-text-color);
    cursor: pointer;
    user-select: none;
    text-decoration: none!important;
    transition: color 200ms;
}

.aros-bottom-menu-item i {
    font-size: var(--arosbottommenu-icon-size);
    color: var(--arosbottommenu-icon-color);
    font-family: FontAwesome;
    transition: color 200ms;
	  padding-bottom : 10px;
}

u {

    text-decoration: none;

    display: inline;

    box-shadow: inset 0 -9px 0 #d1e780; 

}

.skin_view .area_view h2 {
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 0;
    padding-left: 0.75rem;
		text-indent: 0.1em; /* Add left indentation to the text */
    font-weight: 600 !important;
    line-height: 1.9;
    word-break: normal;
    word-wrap: break-word;
    color: rgb(8, 8, 8);
    background: linear-gradient(to right, #bff8b7 50%, #6af946);
		background-size: 150% 100%; /* Adjust the background width */
    border-radius: 15px 15px 0 0;
    border-left: 0px solid #4abe2d;
    border-bottom: 3px solid #4de938;
}