:root {
    --full-container: 1800px;
    --container: 1240px;
    --middle-container: 1440px;
    --small-container: 1200px;
    --main-color: #2faaff;
    --main-color2: #1f2d4c;
    --sub-color: #0056ad;
    --point-color:#8dc63f;
    --transition1: all 0.3s ease;
    --header-heihgt:80px;
  }
.container
{max-width:var(--container); margin:0 auto; }
.full-container
{max-width:var(--full-container); margin:0 auto; }
.middle-container
{max-width:var(--middle-container); margin:0 auto; }

.small-container
{max-width:var(--small-container); margin:0 auto; }

.main-visual-txt 
{position:relative; display:table; width:100%; height:100%;}
.visual-txt-con
{width:100%; height:100%; display:table; text-align:center;}
.table-cell-layout
{display:table-cell; vertical-align:middle; }

h1,h2,h3,h4,h5,h6
{font-family:'pretendard'; letter-spacing:-0.02em}

@media screen and (max-width:1240px){
    .container
    {padding:0 20px;}
}

/* animation--------------------------- */

/* 위로 나타나기 - 서브페이지 or 섹션 */
.up {opacity: 0; transform: translateY(50px); transition: all 0.6s ease;}
.up.active {opacity: 1; transform: translateY(0);}

/* 좌우에서 나오기 */
.left{opacity: 0; transform: translateX(-50px); transition: all 0.6s ease;}
.right{opacity: 0; transform: translateX(50px); transition: all 0.6s ease;}
.left.active,.right.active{opacity: 1; transform: translate(0, 0);}

/* 하나씩 올라오기 */
.item,.box,.history-row 
{opacity: 0; transform: translateY(30px); transition: background-color 0.3s ease, opacity 0.6s ease, transform 0.6s ease;}
.item.active,.box.active,.history-row.active 
{opacity: 1; transform: translateY(0);}