:root {
    --full-container: 1760px;
    --container: 1600px;
    --middle-container: 1320px;
    --main-color: #00449b;
    --sub-color: #0056ad;
    --transition1: all 0.3s ease;
    --header-heihgt:80px;
  }
.container
{max-width:var(--container); margin:0 auto; }
.middle-container
{max-width:var(--middle-container); margin:0 auto; }
.full-container 
{max-width:var(--full-container); margin:0 auto;}
.table-cell-layout
{display:table-cell; vertical-align:middle; }

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

html [data-scroll] { transition: all 0.9s ease; } 
html [data-scroll="fade-up"] { transform: translate3d(0, 30px, 0); -webkit-transform: translate3d(0, 30px, 0); opacity: 0; } 
html [data-scroll="fade-down"] { transform: translate3d(0, -30px, 0); -webkit-transform: translate3d(0, -30px, 0); opacity: 0; } 
html [data-scroll="fade-left"] { transform: translate3d(30px, 0, 0); -webkit-transform: translate3d(30px, 0, 0); opacity: 0; }  
html [data-scroll="fade-right"] { transform: translate3d(-30px, 0, 0); -webkit-transform: translate3d(-30px, 0, 0); opacity: 0; }  
html [data-scroll^="fade"] {opacity:0;}
html [data-scroll^="fade"].animated { opacity: 1; transform: none; -webkit-transform: none; } 

html [data-delay="0.2s"] { transition-delay:0.2s}
html [data-delay="0.3s"] { transition-delay:0.3s}
html [data-delay="0.4s"] { transition-delay:0.4s}
html [data-delay="0.5s"] { transition-delay:0.5s}
html [data-delay="0.6s"] { transition-delay:0.6s}
html [data-delay="0.8s"] { transition-delay:0.8s}
html [data-delay="1s"] { transition-delay:1s}
@media screen and (max-width:1240px){
    .container
    {padding:0 20px;}
}