@charset "utf-8";

/* =========================== SUB (»ó´Ü ºñÁÖ¾ó °øÅë) */
#shSub {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    margin: 0 auto;
    background: url(../img/sub/company1_bg.jpg) center no-repeat;
    background-size: cover;
}
#shSub .txt_area {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--k-font);
}
#shSub .txt_area p {
    margin-bottom: 20px;
    font-size: 46px;
    font-weight: 700;
}
#shSub .txt_area div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}
#shSub .txt_area div a { padding-top: 3px }
#shSub .txt_area div svg { fill: #fff }
#shSub .txt_area div i {
    margin: 0 20px;
    font-size: 14px;
}
#shSub .sub_tit { display: none }

/* =========================== SNB (¼­ºê ¸Þ´º) */
#shSnb {
    display: flex;
    justify-content: center;
    margin: 0 auto 50px;
    background: #3ec890;
}
#shSnb li+li {
    border-left: 1px solid rgba(255, 255, 255, .15);
}
#shSnb li a {
    display: block;
    min-width: 160px;
    height: 62px;
    padding: 0 20px;
    font-size: 17px;
    font-weight: 500;
    line-height: 62px;
    text-align: center;
    color: #fff;
    font-family: var(--k-font);
}
#shSnb li.on a {
    font-weight: 600;
    color: #3ec890;
    background: #fff;
}

/* =========================== PAGE COMMON & VARS */
:root {
    --primary: #3ec890;
    --primary-20: rgba(62, 200, 144, .2);
    --second: #102e48;
    --mainsize: 1460px;
    --enfont: 'Wix Madefor Display';
    --k-font: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.pagecommon {
    font-size: 18px;
    color: #777;
    line-height: 1.65;
    font-family: var(--k-font);
}
.pagecommon .br { white-space: pre-line; }
#history1003 { overflow: hidden; }

/* =========================== HISTORY CONTENT */
#history1003 .cont {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    position: relative;
    max-width: var(--mainsize);
    margin: 0 auto;
}

/* --- SINCE (ÁÂÃø °íÁ¤ ¿µ¿ª) --- */
#history1003 .cont .since {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 180px;
    font-size: 20px;
    font-weight: 500;
    color: #111;
}
#history1003 .cont .since span {
    padding-left: 2px;
    font-weight: 800;
    font-family: var(--enfont);
}
#history1003 .cont .since p {
    margin: 5px 0 30px;
    font-size: 67px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
    font-family: var(--enfont);
}
#history1003 .cont .since p b { color: var(--primary); }

/* SINCE ½ºÅ©·Ñ °íÁ¤ Ŭ·¡½º */
#history1003 .cont .since.fix {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    transform: translateX(-730px) !important; /* var(--mainsize)ÀÇ Àý¹Ý */
}
#history1003 .cont .since.absol_bt {
    position: absolute !important;
    top: auto !important;
    bottom: 280px !important;
    left: 0 !important;
    transform: none !important;
}

/* --- HISTORY LIST (¿ìÃø ¿¬Çõ ¸®½ºÆ®) --- */
#history1003 .history {
    position: relative;
    width: 66%;
    padding: 260px 0;
}
#history1003 .history:before {
    display: block;
    content: "";
    position: absolute;
    left: 143px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #e1e1e1;
}
#history1003 .history dl {
    display: flex;
    align-items: flex-start;
    opacity: .3;
}
#history1003 .history dl+dl { margin-top: 200px; }

#history1003 .history dl dt {
    position: relative;
    flex-shrink: 0;
    width: 155px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
    color: #111;
    transition: all .3s;
    font-family: var(--enfont);
}

/* ¿¬Çõ Æ÷ÀÎÆ® (image_487ba1.png ½ºÅ¸ÀÏ) */
#history1003 .history dl dt span {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    transition: all .3s;
    border: 1px solid #e1e1e1; /* ±âº» Å׵θ® */
}
#history1003 .history dl dt span:after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #111;
    transition: all .3s;
}

#history1003 .history dl dd {
    padding: 0 30px 0 12%;
    transform: translateX(10px);
    transition: all .6s;
    flex-grow: 1;
}

/* ¡Ú Ãß°¡: ¿¬µµ ³» °³º° Ç׸ñ ½ºÅ¸ÀÏ (°£°Ý ¹× ¿·¿¡ Á¡) */
#history1003 .history dl dd .hist_item {
    position: relative;
    padding-left: 22px; /* ÀÛÀº Á¡ÀÌ µé¾î°¥ ¿©¹é */
    margin-bottom: 20px; /* Ç׸ñ °£ °£°Ý */
}
#history1003 .history dl dd .hist_item:last-child { margin-bottom: 0; }

#history1003 .history dl dd .hist_item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px; /* ÅؽºÆ® ³ôÀÌ¿¡ ¸ÂÃã */
    width: 5px;
    height: 5px;
    background: #ccc;
    border-radius: 50%;
    transition: all .3s;
}

#history1003 .history dl dd .hist_item p {
    font-size: 20px; /* ´ÙÁß Ç׸ñÀÏ ¶§ ÆùÆ® Å©±â »ì¦ Á¶Á¤ */
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    word-break: keep-all;
    margin-bottom: 0;
}

/* --- È°¼ºÈ­ »óÅ (AOS) --- */
#history1003 .history dl.aos-animate { opacity: 1; }
#history1003 .history dl.aos-animate dt { color: var(--primary); }

#history1003 .history dl.aos-animate dt span {
    background: rgba(62, 200, 144, 0.2);
    border: none;
}
#history1003 .history dl.aos-animate dt span:after {
    background: var(--primary);
    width: 10px;
    height: 10px;
}
#history1003 .history dl.aos-animate dd { transform: translateX(0); }
#history1003 .history dl.aos-animate dd .hist_item:before {
    background: var(--primary); /* È°¼ºÈ­ ½Ã ÀÛÀº Á¡µµ ÃÊ·Ï»öÀ¸·Î */
}

/* =========================== BOTTOM AREA */
#history1003 .btm_area {
    position: relative;
    display: flex;
    align-items: center;
    height: 400px;
    padding: 0 100px;
    background: url(../img/sub/history1003_btm_bg.jpg) center no-repeat;
    background-size: cover;
    background-position: center;
	border-radius: 10px;   /* ¿øÇÏ´Â ¸¸Å­ Á¶Àý */
    overflow: hidden;
}

/* ¹è°æ ºÒÅõ¸íµµ Á¶Àý¿ë ·¹À̾î */
#history1003 .btm_area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* ¡ç ¼ýÀÚ·Î Á¶Àý */
    z-index: 0;
}

#history1003 .btm_area .txt {
    width: 100%;
    max-width: var(--mainsize);
    margin: 0 auto;
    font-size: 18px;
    color: rgba(255, 255, 255, .6);
}
#history1003 .btm_area .txt p {
    margin-bottom: 50px;
    font-size: 35px;
    font-weight: 100;
    color: #fff;
    line-height: 1.25;
}
#history1003 .btm_area .txt p b { font-weight: 700; }
#history1003 .btm_area .txt a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 232px;
    height: 60px;
    border-radius: 35px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .25);
    transition: background .3s;
}
#history1003 .btm_area .txt a:hover { background: var(--primary); }

/* =========================== RESPONSIVE (¹ÝÀÀÇü) */
@media (max-width:1460px) {
    #shSub { height: 350px }
    #history1003 .cont .since.fix { left: 50px !important; transform: none !important; }
    #history1003 .cont .since { left: 50px }
}

@media (max-width:1024px) {
    #shSnb { display: none }
    #history1003 .cont .since { left: 30px; padding-top: 100px; }
    #history1003 .cont .since p { font-size: 56px }
    #history1003 .history { width: 62%; }
    #history1003 .history dl dd .hist_item p { font-size: 22px; }
}

@media (max-width:768px) {
    #shSub { height: 55px; background: none; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; }
    #shSub .txt_area p { font-size: 16px; color: #000; margin: 0; }
    #shSub .txt_area div { display: none }

    #history1003 .cont { display: block }
    #history1003 .cont .since { position: relative !important; left: auto !important; padding: 60px 20px; }
    #history1003 .history { width: 100%; padding: 20px; }
    #history1003 .history:before { left: 118px }
    #history1003 .history dl dt { width: 110px; font-size: 28px }
}

/* =========================== TOP BUTTON (btm_area ¿ìÃø ÇÏ´Ü) */
#history1003 .btm_area .to_top{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:2;              /* ::before(¿À¹ö·¹ÀÌ) À§·Î */

  width:46px;
  height:46px;
  border:0;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,.95);
  color:#111;
  cursor:pointer;

  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

#history1003 .btm_area .to_top svg{
  width:18px;
  height:18px;
}

#history1003 .btm_area .to_top:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  background:#3ec890;
  color:#fff;
}

/* ¸ð¹ÙÀÏ »ì¦ Ãà¼Ò */
@media (max-width:480px){
  #history1003 .btm_area .to_top{
    right:14px;
    bottom:14px;
    width:42px;
    height:42px;
  }
}