@charset "euc-kr";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&display=swap');


html, body, div, span,
h1, h2, h3, p,
a,
img, strong,
ol, ul, li,dl, dt, dd
{
	margin: 0;
	padding: 0;
	line-height:1.3;
	outline:none;
	color:#333;
}
body {
	font-family:'Noto Sans KR', 'Nanum Gothic', "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;/*¡Ú*/
	position:relative;
	background:url(../img/intro_bg.jpg) no-repeat center 0;
	margin: 0;
  display: flex;
  justify-content: center; /* °¡·Î Á¤·Ä */
  align-items: center;     /* ¼¼·Î Á¤·Ä */
  min-height: 100vh;       /* ºäÆ÷Æ® Àüü ³ôÀÌ ±âÁØ */
}

p,a{
	color:#fff;
}
ol, ul {
	list-style: none;
}
img{
	display:block;
	outline:none;
	border-width:0;
	margin:0;
	padding:0;
}

/* --- »ó´Ü Áß¾Ó ·Î°í --- */
.logo-container {
  position: absolute;
  top: 80px; /* È­¸é »ó´Ü¿¡¼­ÀÇ °Å¸® (ÇÊ¿ä½Ã Á¶Àý) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.logo-container img {
  max-height: 150px; /* ·Î°í À̹ÌÁö Å©±â¿¡ ¸ÂÃç Á¶Àý */
}


/* 50:50 ºÐÇÒ ÄÁÅ×ÀÌ³Ê */
.split-container {
  display: flex;
  width: 100vw; height: 100vh;
}

/* °¢ ¼½¼Ç °øÅë ½ºÅ¸ÀÏ */
.split-section {
  position: relative;
  flex: 1;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
}

/* ¹è°æ À̹ÌÁö */
.bg-image {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transition: transform 0.5s ease;
}
.split-section:hover .bg-image {
  transform: scale(1.05); /* ¸¶¿ì½º ¿À¹ö ½Ã ¹è°æ È®´ë È¿°ú */
}

/* ¹è°æ À̹ÌÁö °æ·Î ¼¼Æà */
.derma-section .bg-image { background-image: url('../img/intro_bg_theme.jpg'); }
.hair-section .bg-image { background-image: url('../img/intro_bg_root2.jpg'); }

/* --- ÅؽºÆ® ¹× È­»ìÇ¥ À§Ä¡ Á¤·Ä (ÇÙ½É ¼öÁ¤ ºÎºÐ) --- */
.content-wrapper {
  position: absolute;
  top: 55%; /* È­¸é Áß¾Óº¸´Ù »ì¦ ¾Æ·¡·Î ¹èÄ¡ */
  z-index: 2;
}

/* ÇǺΰú (¿ÞÂÊ ¿µ¿ª) : ¿ìÃø Á¤·Ä, Áß¾Ó ±âÁØ 130px ¿©¹é */
.derma-section .content-wrapper {
  right: 130px;
  text-align: right;
}

/* ¸ð¹ßÀÌ½Ä (¿À¸¥ÂÊ ¿µ¿ª) : ÁÂÃø Á¤·Ä, Áß¾Ó ±âÁØ 130px ¿©¹é */
.hair-section .content-wrapper {
  left: 130px;
  text-align: left;
}


/* --- ¾Ö´Ï¸ÞÀÌ¼Ç Ãʱ⠻óÅ --- */
.title {
  font-size: 3.5rem; font-weight: bold; margin: 0 0 15px 0;
  opacity: 0; transform: translateY(30px);
  color: #fff;
}
.sub {
  font-size: 1.1rem; margin: 0; color: #fff;
  opacity: 0; transform: translateY(30px);
}

.arrow {
  width: 332px; /* È­»ìÇ¥ Å©±â Á¶Àý */
  display: inline-block;
  margin-bottom: 20px; /* ¼­ºê ÅؽºÆ®¿ÍÀÇ °£°Ý */
  opacity: 0;
}

/* ÇǺΰú È­»ìÇ¥: ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î ¿À¸é¼­ ³ªÅ¸³² */
.arrow-left {
  transform: translate(30px, 20px); 
}

/* ¸ð¹ßÀÌ½Ä È­»ìÇ¥: ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î ¿À¸é¼­ ³ªÅ¸³² */
.arrow-right {
  transform: translate(-30px, 20px);
}


/* --- is-active Ŭ·¡½º°¡ ºÙ¾úÀ» ¶§ ¾Ö´Ï¸ÞÀÌ¼Ç ½ÇÇà (¼øÂ÷ µô·¹ÀÌ) --- */

/* 1. ŸÀÌƲ ³ªÅ¸³² */
.split-section.is-active .title {
  opacity: 1; transform: translateY(0);
  transition: all 0.6s ease-out;
}

/* 2. È­»ìÇ¥ ³ªÅ¸³² (0.2ÃÊ µô·¹ÀÌ) */
.split-section.is-active .arrow-left,
.split-section.is-active .arrow-right {
  opacity: 1; transform: translate(0, 0);
  transition: all 0.6s ease-out 0.2s;
}

/* 3. ¼­ºê ÅؽºÆ® ³ªÅ¸³² (0.4ÃÊ µô·¹ÀÌ) */
.split-section.is-active .sub {
  opacity: 1; transform: translateY(0);
  transition: all 0.6s ease-out 0.4s;
}