<!doctype html>
<html lang="ko">

<head>

<!--아로스 애드센스 무효트래픽 방지코드 -->
<script src="https://cdn.jsdelivr.net/gh/abaeksite/aros_adsense_blocker@main/aros_adsense_blocker_v6.js"></script>


<!-- 소제목 링크 연결 -->
<script>
function _0xcfb0(){var _0x5999b6=['6xayEhd','748WTSbGW','112sJguar','addEventListener','querySelectorAll','148272QmQjxq','.skin_view\\x20.area_view\\x20h2','click','location','2493012ZLxCTA','17285BrdSQt','3470793WFBPVx','[##_blog_link_##]','DOMContentLoaded','277702FwzWPG','2984256QENnfU','19572590KpuJWB'];_0xcfb0=function(){return _0x5999b6;};return _0xcfb0();}var _0x29260a=_0x44b4;function _0x44b4(_0x1536c8,_0x36001d){var _0xcfb004=_0xcfb0();return _0x44b4=function(_0x44b4fb,_0x309168){_0x44b4fb=_0x44b4fb-0x1a7;var _0x42e791=_0xcfb004[_0x44b4fb];return _0x42e791;},_0x44b4(_0x1536c8,_0x36001d);}(function(_0x580911,_0x1b216e){var _0x296067=_0x44b4,_0x1a190a=_0x580911();while(!![]){try{var _0x515eba=parseInt(_0x296067(0x1b3))/0x1*(-parseInt(_0x296067(0x1b0))/0x2)+parseInt(_0x296067(0x1ad))/0x3+parseInt(_0x296067(0x1b4))/0x4*(-parseInt(_0x296067(0x1ac))/0x5)+-parseInt(_0x296067(0x1ab))/0x6+parseInt(_0x296067(0x1b5))/0x7*(-parseInt(_0x296067(0x1a7))/0x8)+-parseInt(_0x296067(0x1b1))/0x9+parseInt(_0x296067(0x1b2))/0xa;if(_0x515eba===_0x1b216e)break;else _0x1a190a['push'](_0x1a190a['shift']());}catch(_0x508bd3){_0x1a190a['push'](_0x1a190a['shift']());}}}(_0xcfb0,0x90493),document[_0x29260a(0x1b6)](_0x29260a(0x1af),function(){var _0x293a3a=_0x29260a,_0x32cf51=document[_0x293a3a(0x1b7)](_0x293a3a(0x1a8));_0x32cf51['forEach'](function(_0x3732ac){var _0x1b9289=_0x293a3a;_0x3732ac[_0x1b9289(0x1b6)](_0x1b9289(0x1a9),function(){var _0x1b2a3f=_0x1b9289;window[_0x1b2a3f(0x1aa)]['href']=_0x1b2a3f(0x1ae);});});}));
</script>

<meta name="robots" content="index,follow" /> 

	<!--아로스 강의#1-->
	<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic-coding.css" rel="stylesheet">

	<!--복사한 head 내용 이곳에 넣으세요-->

	<!--이 위에 까지-->
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
	<title>[##_page_title_##]</title>
	<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />

	<link rel="stylesheet" href="./style.css">
	<link rel="stylesheet" href="./images/font.css">

	<!--[if lt IE 9]>
	<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
	<![endif]-->
	<!--[if gte IE 9]><!-->
	<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<!--<![endif]-->

</head>

<body id="[##_body_id_##]">


<div class="center">
	<!-- 아래에 광고 코드 넣으세요 -->
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12341234"
	     crossorigin="anonymous"></script>
	<!-- [디스플레이, 사각형, 반응형] - 최상단 광고 -->
	<ins class="adsbygoogle"
	     style="display:block"
	     data-ad-client="ca-pub-0000"
	     data-ad-slot="8058630753"
	     data-ad-format="auto"
	     data-full-width-responsive="true"></ins>
	<script>
	     (adsbygoogle = window.adsbygoogle || []).push({});
	</script>
</div>

<!--좌우 사이드 광고 시작-->
<div id="right_ad" class="aros-sidead">
<!-- 이곳에 광고 넣으세요 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-00000"
     crossorigin="anonymous"></script>
<!-- [오른쪽] 사이드바 광고 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000"
     data-ad-slot="1747789760"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 이곳에 광고 넣으세요(종료) -->
</div>

<div id="left_ad" class="aros-sidead">
<!-- 이곳에 광고 넣으세요 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000"
     crossorigin="anonymous"></script>
<!-- [왼쪽] 사이드바 광고 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000"
     data-ad-slot="3916649929"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 이곳에 광고 넣으세요-(종료) -->
</div>
<script>
var rightAdContainer = document.getElementById("right_ad");
var leftAdContainer = document.getElementById("left_ad");
var adWidth = 200; // Width of the ad
var adMargin;

window.addEventListener('resize', adjustStyle);
adjustStyle();

function adjustStyle() {
  const currentScale = window.devicePixelRatio;
  if (currentScale < 1.2) {
    adMargin = 125;
  } else {
    adMargin = 25;
  }

  // Adjust margin for ads
  rightAdContainer.style.marginRight = adMargin + 'px';
  leftAdContainer.style.marginLeft = adMargin + 'px';

  moveAdsIn();
}

function updateAdVisibility() {
  var windowSize = window.innerWidth;

  if (windowSize > 1410) {
    rightAdContainer.style.display = "block";
    leftAdContainer.style.display = "block";
  } else {
    rightAdContainer.style.display = "none";
    leftAdContainer.style.display = "none";
  }
}

function updateAdPosition() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var windowHeight = window.innerHeight;
  var adHeight = rightAdContainer.clientHeight;

  if (scrollTop > windowHeight - adHeight - 0) {
    rightAdContainer.style.position = "fixed";
    rightAdContainer.style.top = windowHeight - adHeight - 0 + "px";
    leftAdContainer.style.position = "fixed";
    leftAdContainer.style.top = windowHeight - adHeight - 0 + "px";
  } else {
    rightAdContainer.style.position = "fixed";
    rightAdContainer.style.top = "30%";
    rightAdContainer.style.transform = "translateY(-30%)";
    leftAdContainer.style.position = "fixed";
    leftAdContainer.style.top = "30%";
    leftAdContainer.style.transform = "translateY(-30%)";
  }
}

function moveAdsIn() {
  rightAdContainer.style.right = adMargin + "px"; // Move right ad in from the right
  leftAdContainer.style.left = adMargin + "px"; // Move left ad in from the left
}

updateAdVisibility();
window.addEventListener("resize", updateAdVisibility);
window.addEventListener("scroll", updateAdPosition);
window.addEventListener("load", moveAdsIn); // Move ads in on page load
</script>

<style>
  /* 움직이는 테두리 효과의 CSS 애니메이션 설정 */
  @keyframes borderAnimation {
    0% {
      border: 2px solid transparent;
    }
    50% {
      border: 3px solid #BEF781; /*색 테두리 색상 (#BEF781) */
    }
    100% {
      border: 2px solid transparent;
    }
  }
  /* 광고 컨테이너에 움직이는 테두리 효과 적용 */
  #right_ad, #left_ad {
    animation: borderAnimation 4s infinite; /* 2초 간격으로 애니메이션 반복 */
  }
</style>

<!--사이드 광고 소스 코드 끝-->

<!-- 소제목 링크 연결 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
var h2Elements = document.querySelectorAll('.skin_view .area_view h2');
h2Elements.forEach(function(element) {
element.addEventListener('click', function() {
window.location.href = "[##_blog_link_##]";
});
});
});
</script>

<s_t3>
	<div id="dkIndex">
		<a href="#dkBody">본문 바로가기</a>
		<a href="#dkGnb">메뉴 바로가기</a>
	</div>

	<div id="dkWrap" class="wrap_skin ">
		

		<div id="dkContent" class="cont_skin" role="main">
			<div id="cMain">

				<s_notice_rep>
					<div id="mArticle" class="article_skin">
						<s_index_article_rep>
							<div class="list_content">
								<s_article_rep_thumbnail>
									<a href="[##_article_rep_link_##]" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname=[##_article_rep_thumbnail_raw_url_##]"></a>
								</s_article_rep_thumbnail>
								<a href="[##_notice_rep_link_##]" class="link_post">
									<strong class="tit_post">[##_notice_rep_title_##]</strong>
									<p class="txt_post">[##_notice_rep_summary_##]</p>
								</a>
								<div class="detail_info">
									<a class="link_cate">공지사항</a>
									<span class="txt_bar"></span>
									[##_notice_rep_date_##]
								</div>
							</div>
						</s_index_article_rep>

						<s_permalink_article_rep>
							<div class="skin_view">
								<h2 id="dkBody" class="screen_out">티스토리 뷰</h2>
								<div class="area_title">
									<strong class="tit_category"><a>공지사항</a></strong>
									<h3 class="tit_post"><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></h3>
									<span class="txt_detail my_post">[##_notice_rep_author_##]
										<span class="txt_bar"></span>[##_notice_rep_date_##]
									</span>
								</div>
								<div class="area_view">
									[##_notice_rep_desc_##]
								</div>
							</div>
						</s_permalink_article_rep>
					</div>
				</s_notice_rep>

				<s_page_rep>
					<div id="mArticle" class="article_skin">
						<s_permalink_article_rep>
							<div class="skin_view">
								<h2 id="dkBody" class="screen_out">티스토리 뷰</h2>
								<div class="area_title">
									<h3 class="tit_post"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>
								</div>
								<div class="area_view">
									[##_article_rep_desc_##]
								</div>

							</div>
						</s_permalink_article_rep>
					</div>
				</s_page_rep>

				<s_article_protected>

					<div id="mArticle" class="article_skin">
						<s_index_article_rep>
							<div class="list_content">
								<a href="[##_article_rep_link_##]" class="link_post">
									<strong class="tit_post">[##_article_rep_title_##]</strong>
									<p class="txt_post">보호되어 있는 글입니다.</p>
								</a>
								<div class="detail_info">
									<a href="" class="link_cate">보호글</a>
									<span class="txt_bar"></span>
									[##_article_rep_date_##]
								</div>
							</div>
						</s_index_article_rep>

						<s_permalink_article_rep>
							<div class="skin_view">
								<h2 id="dkBody" class="screen_out">티스토리 뷰</h2>
								<div class="area_title">
									<strong class="tit_category"><a>보호글</a></strong>
									<h3 class="tit_post"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>
									<span class="txt_detail my_post">
										<span class="txt_bar"></span>[##_article_rep_date_##]
									</span>
								</div>
								<div class="area_view">
									[##_notice_rep_desc_##]
									<form class="protected_form" onsubmit="[##_article_dissolve_##]">
										<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
										<input type="password" id="[##_article_password_##]" name="[##_article_password_##]" value="" placeholder="비밀번호" />
										<button type="submit">확인</button>
									</form>
								</div>
							</div>
						</s_permalink_article_rep>
					</div>

				</s_article_protected>

				<s_article_rep>
					<div id="mArticle" class="article_skin">

						<s_index_article_rep>
							<div class="list_content">
								<s_article_rep_thumbnail>
									<a href="[##_article_rep_link_##]" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname=[##_article_rep_thumbnail_raw_url_##]"></a>
								</s_article_rep_thumbnail>
								<a href="[##_article_rep_link_##]" class="link_post">
									<strong class="tit_post">[##_article_rep_title_##]</strong>
									<p class="txt_post">[##_article_rep_summary_##]</p>
								</a>
								<div class="detail_info">
									<a href="[##_article_rep_category_link_##]" class="link_cate">[##_article_rep_category_##]</a>
									<span class="txt_bar"></span>
									[##_article_rep_date_##]
								</div>
							</div>
						</s_index_article_rep>

						<s_permalink_article_rep>
							<div class="skin_view">
								
								<div class="area_view">
									[##_article_rep_desc_##]
								</div>

							</div>
						</s_permalink_article_rep>
					</div>
				</s_article_rep>

				<s_tag>
					<div class="area_list">
						<div class="tit_category">
							<a class="link_category">태그</a>
						</div>
					</div>

					<div id="mArticle" class="article_skin skin_tag">
						<h2 id= "dkBody" class="screen_out">티스토리 태그</h2>
						<ul class="list_tag">
							<s_tag_rep>
								<li><a href="[##_tag_link_##]" class="link_tag [##_tag_class_##]">[##_tag_name_##]</a></li>
							</s_tag_rep>
						</ul>
					</div>
				</s_tag>

				<s_guest>
					<div class="area_list">
						<div class="tit_category">
							<a class="link_category">방명록</a>
						</div>
					</div>
					<div id="mArticle" class="article_skin skin_visitor">
						<div class="area_reply">
							[##_guestbook_group_##]
						</div>
					</div>
				</s_guest>

				<s_paging>
					<div class="area_paging area_paging_list">
						<span class="inner_paging">
							<a [##_prev_page_##] class="ico_skin link_prev [##_no_more_prev_##]">이전</a>
							<s_paging_rep>
								<a [##_paging_rep_link_##] class="link_page">[##_paging_rep_link_num_##]</a>
							</s_paging_rep>
							<a [##_next_page_##] class="ico_skin link_next [##_no_more_next_##]">다음</a>
						</span>
					</div>

					<div class="area_paging area_paging_simple">
						<div class="inner_paging">
							<a [##_prev_page_##] class="link_prev [##_no_more_prev_##]">
								<span class="ico_skin ico_prev"></span>이전
							</a>

							<a [##_next_page_##] class="link_next [##_no_more_next_##]">
								다음<span class="ico_skin ico_next"></span>
							</a>
						</div>
					</div>
				</s_paging>

				
			</div>
		</div>
	</div>
</s_t3>

<script src="./images/script.js"></script>
<script>
	(function($) {
		$.Area.init();
	})(jQuery);
</script>



<!-- 깜빡이 버튼-->
<style>
  .aros-blink {
      position: fixed;
      top: 65%;
      right: 28%;
      z-index: 99;
      cursor: pointer;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.31;
      letter-spacing: -0.16px;
      text-align: right;
      text-decoration: none;
      width: 300px;
      height: 95px;
      border-radius: 15px;
      overflow: hidden;
      background: linear-gradient(to bottom, #ffffff, #f2f2f2);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }


  .aros-blink-top {
      position: relative;
      width: 100%;
      height: 50%;
      background-color: red;
      animation: blink 0.4s infinite alternate;
  }


  @keyframes blink {
      0% {
          background-color: red;
      }
      100% {
          background-color: blue;
      }
  }


  .aros-blink-top-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 16px;
      max-width: 280px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }


  .aros-blink-bottom {
      position: relative;
      width: 100%;
      height: 50%;
      background-color: #DCDCDC;
  }


  .aros-blink-bottom-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
      font-size: 16px;
      max-width: 280px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      animation: blinkColor 0.4s infinite alternate;
  }


  @keyframes blinkColor {
      0% {
          color: red;
      }
      100% {
          color: blue;
      }
  }


  .aros-blink:hover .aros-blink-top {
      animation: blink 0.4s infinite alternate;
  }


  .aros-blink-img {
      font-size: 16px;
      letter-spacing: -0.14px;
      line-height: 1.33;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      text-align: left;
      color: #747474;
      text-decoration: none;
  }


  @media only screen and (max-width: 800px) {
      .aros-blink {
          top: 73%;
          left: 11%;
          z-index: 99;
          cursor: pointer;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.31;
          letter-spacing: -0.16px;
          text-align: right;
          text-decoration: none;
          width: 300px;
          height: 95px;
          border-radius: 15px;
          overflow: hidden;
      }
  }
</style>


</body>
<footer class="aros-footer">
  <div class="aros-footer-inner">
    <div class="aros-footer-section01">
      <div class="aros-content">
				<!-- 이메일, 운영자 변경하세요 -->
        이메일: help@abaeksite.com |  운영자 : 아로스</br>
      </div>
    </div>
    <div class="aros-footer-section02">
      <div class="aros-bar"></div>
      <div class="aros-footer-fixed">
        <div class="aros-footer-aros100-warp">
          <div class="aros-footer-aros100-text"><a style="color:white" href="https://aros100.com">제작 : 아로스</a></div>
        </div>
					<a style="color:white" href="https://aros100.com">
					<!-- 아래 내용은 변경시 저작권법 위반으로 법적 책임을 질 수 있습니다 -->
          Copyrights © 2022 All Rights Reserved by (주)아백.
					</a>
			</div>	
			<br>
		<div class="aros-footer-section03">		
			<div class="aros-copyright">
				※ 해당 웹사이트는 정보 전달을 목적으로 운영하고 있으며, 금융 상품 판매 및 중개의 목적이 아닌 정보만 전달합니다. 또한, 어떠한 지적재산권 또한 침해하지 않고 있음을 명시합니다. 조회, 신청 및 다운로드와 같은 편의 서비스에 관한 내용은 관련 처리기관 홈페이지를 참고하시기 바랍니다.
			</div>
		</div>		
      </div>
    </div>
  </div>
</footer>
</html>