/* 아로스 강의 #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;
}

.skin_view .area_view h3 {
    font-size: 24px;
    margin-bottom: 0; /* Remove bottom margin */
    margin-top: 15px;
    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, #ffffff 50%, #ffffff);
    border-radius: 0px 0px 0 0;
    border-left: 5px solid #1a6108;
    border-bottom: 0px solid #4de938;
}

/* 아로스 강의 #3 */

.aros-button {
  background-color: rgb(240, 36, 0);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
  width: 80%;
  height: 80px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
  border-radius: 30px;
  font-size: 40px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  font-family: 'NanumGothicCodingBold';
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.aros-button:hover {
  background-color: rgb(235, 161, 65);
  transform: scale(1.1);
}

.aros-button.most-likely-to-click {
  padding: 20px 30px;
  font-size: 50px;
}

@media only screen and (max-width: 600px) {
  .aros-button {
    font-size: 22px;
    width: 90%;
    height: 60px;
    overflow: visible;
    white-space: nowrap; /* Prevents text from wrapping */
    max-width: 100%; /* Set max-width to 100% */
  }

  .aros-button.most-likely-to-click {
    padding: 15px 25px;
    font-size: 40px;
  }
}

@charset "UTF-8";
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
input::-ms-clear {display:none}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:20px;line-height:1.5;font-family:'Noto Sans', sans-serif;color:#666; -webkit-font-smoothing: subpixel-antialiased;} 
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
a:active {background-color:transparent}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

#tistorytoolbarid { display:none }

/* global */
#dkIndex {overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0} /* 스킵네비게이션 */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-1;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.show {display:block}
.hide {display:none}
.emph_t{color:#3db39e}
.cont_skin{margin-top:80px}
.article_skin{width:820px;margin:0 auto}
.txt_bar{display:inline-block;width:1px;height:9px;margin:0 5px;background-color:#ebebeb}
.img_profile{float:left;margin-right:16px;border-radius:50px}
.ico_focused {outline: 1px dotted #000;outline: -webkit-focus-ring-color auto 5px}

/* 공통이미지 */
.ico_skin{display:inline-block;overflow:hidden;font-size:0;line-height:0;background:url("images/ico_skin.gif") 0 0 no-repeat;text-indent:-9999px}

/* 헤더 */
.wrap_skin{position:relative}
.area_head{position:fixed;top:0;left:0;z-index:10;width:100%;height:80px;border-bottom:1px solid #ebebeb;background-color:#fff;background-color:rgba(255,255,255,.95)}
.area_head:after{display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
.area_head .area_profile{position:relative;float:left;padding:15px 0 0 30px}
.area_head .area_profile .link_profile { float:left }
.area_head .area_profile .info_profile { float:left; max-width:270px }

.area_head .btn_name{margin-top:5px;font-weight:bold;margin-bottom:2px}
.area_head .ico_name{width:10px;height:6px;margin:7px 0 0 6px;vertical-align:top}
.area_head .txt_condition{width:100%;font-size:12px;color:#aaa;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.area_head .list_name{display:none;position:absolute;top:44px;left:92px;border:1px solid #dcdcdc;border-radius:2px;background-color:#fff}
.area_head .on .list_name{display:block;width:112px;padding-top:13px;padding-bottom:2px}
.area_head .on .ico_name { background-position: 0 -632px; }
.area_head .link_name{display:block;padding-left:15px;margin-bottom:7px;text-decoration:none;color:#666}
.area_head .link_name:hover { text-decoration: underline; color:#3db39e}
.area_head .box_division{padding-top:13px;border-top:1px solid #f4f4f4;margin-top:9px}