/* 로딩페이지 */
html{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

:root {
    /*컬러관련*/
    --primary-navy: #142A40;
    --primary-green: #8CC63F;
    --primary-navy-vertical: linear-gradient(180deg, #142A40 0%, #2F5A86 100%);
    --primary-green-vertical: linear-gradient(180deg, #8CC63F 0%, #99E830 100%);
    --primary-navy-horizontal: linear-gradient(90deg, #142A40 0%, #2F5A86 100%);
    --primary-green-horizontal: linear-gradient(90deg, #8CC63F 0%, #99E830 100%);
    --black: #142A40;
    --gray: #5F7182;
    --white: #ffffff;
    --color-600: #9fb1bc;
    --color-500: #E5EAEF;
    --color-400: #F1F6FF;
    --color-300: #F7F7FB;
    --color-200: #F8F8FF;

    /* 컨테이너 */
    --l-cont: 1440px;
    --m-cont: 1300px;
    --s-cont: 1200px;

    /*로딩관련*/
    --strand-width: 2.5rem;
    --strand-height: .5rem;
    --strand-line: .125rem;
    --strand-ball: calc(var(--strand-height) * .75);
    --animation-duration: .5s;
    --animation-delay: calc(var(--animation-duration) * -.375);
}

/* 폰트설정 */
.display1,.display2,.display3,.display4,
h1,h2,h3,h4,h5,h6{
    color: var(--black);
    font-weight: 700;
    word-break: keep-all;
}
.display1{
    font-size: 76px;
    line-height: 84px;
}
.display2{
    font-size: 62px;
    line-height: 76px;
}
.display3{
    font-size: 44px;
    line-height: 52px;
}
.display4{
    font-size: 28px;
    line-height: 40px;
}
h1{
    font-size: 42px;
    line-height: 54px;
}
h2{
    font-size: 32px;
    line-height: 48px;
}
h3{
    font-size: 24px;
    line-height: 34px;
}
h4{
    font-size: 22px;
    line-height: 28px;
}
h5{
    font-size: 20px;
    line-height: 28px;
}
h6{
    font-size: 16px;
    line-height: 22px;
}
p, div, nav, ul, li{
    color: var(--gray);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    word-break: keep-all;
}
:is(p, div, nav, ul, li).large{
    font-size: 18px;
    line-height: 32px;
}
:is(p, div, nav, ul, li).small{
    font-size: 12px;
    line-height: 22px;
}
:is(p, div, nav, ul, li).Bold{ font-weight: 700; }
a{
    color: var(--black);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    transition: 0.3s;
}
a:hover{ color: var(--primary-green); }

.t400-100{
    font-size: 18px;
    line-height: 20px;
    font-weight: 100;
}
.t400-200{
    font-size: 18px;
    line-height: 20px;
    font-weight: 200;
}
.t400-300{
    font-size: 18px;
    line-height: 20px;
    font-weight: 300;
}.t400-400{
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
}.t400-500{
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
}.t400-600{
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
}.t400-700{
    font-size: 18px;
    line-height: 20px;
    font-weight: 700;
}.t400-800{
    font-size: 18px;
    line-height: 20px;
    font-weight: 800;
}.t400-900{
    font-size: 18px;
    line-height: 20px;
    font-weight: 900;
}
.t300-100{
    font-size: 16px;
    line-height: 18px;
    font-weight: 100;
}
.t300-200{
    font-size: 16px;
    line-height: 18px;
    font-weight: 200;
}
.t300-300{
    font-size: 16px;
    line-height: 18px;
    font-weight: 300;
}
.t300-400{
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
}
.t300-500{
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
}
.t300-600{
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
}
.t300-700{
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
}
.t300-800{
    font-size: 16px;
    line-height: 18px;
    font-weight: 800;
}
.t300-900{
    font-size: 16px;
    line-height: 18px;
    font-weight: 900;
}
.t200-100{
    font-size: 14px;
    line-height: 16px;
    font-weight: 100;
}
.t200-200{
    font-size: 14px;
    line-height: 16px;
    font-weight: 200;
}
.t200-300{
    font-size: 14px;
    line-height: 16px;
    font-weight: 300;
}
.t200-400{
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
}
.t200-500{
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
}
.t200-600{
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}
.t200-700{
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
}
.t200-800{
    font-size: 14px;
    line-height: 16px;
    font-weight: 800;
}
.t200-900{
    font-size: 14px;
    line-height: 16px;
    font-weight: 900;
}
.t100-100{
    font-size: 12px;
    line-height: 14px;
    font-weight: 100;
}
.t100-200{
    font-size: 12px;
    line-height: 14px;
    font-weight: 200;
}
.t100-300{
    font-size: 12px;
    line-height: 14px;
    font-weight: 300;
}
.t100-400{
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
}
.t100-500{
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
}
.t100-600{
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
}
.t100-700{
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
}
.t100-800{
    font-size: 12px;
    line-height: 14px;
    font-weight: 800;
}
.t100-900{
    font-size: 12px;
    line-height: 14px;
    font-weight: 900;
}

/* 컨테이너 */
.inner-l,.inner-m,.inner-s{
    max-width: var(--l-cont);
    width: 100%;
    margin: auto;
}
.inner-m{ max-width: var(--m-cont); }
.inner-s{ max-width: var(--s-cont); }

/* 버튼 */
.btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 50px;

    height: 50px;
    
    border-radius: 8px;

    transition: transform 0.9s ease, opacity 0.9s ease, background-color 0.3s, font-weight 0.3s, padding 0.3s, border 0.3s;
    -webkit-transition: transform 0.9s ease, opacity 0.9s ease, background-color 0.3s, font-weight 0.3s, padding 0.3s, border 0.3s;
    -ms-transition: transform 0.9s ease, opacity 0.9s ease, background-color 0.3s, font-weight 0.3s, padding 0.3s, border 0.3s;
    -moz-transition: transform 0.9s ease, opacity 0.9s ease, background-color 0.3s, font-weight 0.3s, padding 0.3s, border 0.3s;
    -o-transition: transform 0.9s ease, opacity 0.9s ease, background-color 0.3s, font-weight 0.3s, padding 0.3s, border 0.3s;
}
.btn.reveal{
    transform: translateY(10px);
    opacity: 0;
}
.btn.reveal.act{
    transform: translateY(0px);
    opacity: 1;
}
.btn.back{
    background-color: var(--black);
    color: var(--white);
}
.btn.back:hover{
    font-weight: 600;
    background-color: var(--primary-green);
}
.btn.border{
    background-color: var(--white);
    border: 1px solid var(--black);
    color: var(--black);
}
.btn.border:hover{
    font-weight: 600;
    padding: 14px 48px;
    border: 3px solid var(--black);
}

/* 로딩페이지 */
#loader {
    position: fixed;
    top:0 ;
    bottom:0 ;
    left:0 ;
    right:0 ; 
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-height: 100vh;
    font-size: 16px;
    background-color: var(--color-200);
}
.dna { width: var(--strand-width); }
.strand {
    position: relative;
    width: var(--strand-width);
    height: var(--strand-height);
}
.strand:nth-child(3n) { --primary-navy: var(--primary-green); }
.strand::before, .strand::after {
    content: "";
    position: absolute;
    background: var(--primary-navy);
    -webkit-animation-duration: calc(var(--animation-duration));
            animation-duration: calc(var(--animation-duration));
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-delay: calc(var(--s) * var(--animation-delay));
            animation-delay: calc(var(--s) * var(--animation-delay));
}
.strand::before {
    left: calc(var(--strand-ball) / 2);
    top: calc((var(--strand-height) - var(--strand-line)) / 2);
    width: calc(var(--strand-width) - var(--strand-ball));
    height: var(--strand-line);
    -webkit-animation-name: line;
            animation-name: line;
    will-change: transform;
}
.strand::after {
    top: calc((var(--strand-height) - var(--strand-ball)) / 2);
    width: var(--strand-ball);
    height: var(--strand-ball);
    border-radius: 50%;
    box-shadow: calc(var(--strand-width) - var(--strand-ball)) 0 0 var(--primary-navy);
    -webkit-animation-name: ball;
            animation-name: ball;
    will-change: transform, box-shadow;
}
@-webkit-keyframes line { to { transform: scaleX(0); } }
@keyframes line { to { transform: scaleX(0); } }
@-webkit-keyframes ball { 
    to {
        transform: translateX(calc((var(--strand-width) - var(--strand-ball)) / 2));
        box-shadow: 0 0 0 var(--primary-navy);
    }
}
@keyframes ball {
    to {
        transform: translateX(calc((var(--strand-width) - var(--strand-ball)) / 2));
        box-shadow: 0 0 0 var(--primary-navy);
    }
}

/* 해더 */
header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    position: fixed;
    height: 100px;
    left: 0px;
    right: 0px;
    top: 0;

    background: var(--white);
    transition: all 0.9s ease;
    z-index: 10;
}
body.act header.act,
body.act header:hover{
    background: var(--white);
    box-shadow: none;
}
header.act{
    background: rgba(255,255,255,0.95);
    box-shadow: 0px 6px 12px rgba(148, 163, 184, 0.15);
}
header:hover{
    box-shadow: 0px 6px 12px rgba(148, 163, 184, 0.15);
}
#inner-hd{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0px;

    height: 100%;
}
#logo{
    width: 132px;
    height: 28px;
    line-height: 0;
}
#logo img{
    width: 100%;
}
#inner-hd nav.menu{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 10px 0px 0px;
    gap: 100px;

    height: 50px;
}
#gnb{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 50px;
    height: 100%;
}
#gnb li.main{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;

    width: 82px;
    height: 100%;
}
#gnb li ul{
    position: absolute;
    top: 48px;
    overflow: hidden;

    display: flex;
    visibility:hidden;
    opacity: 0;
    flex-direction: column;
    align-items: center;
    padding: 25px 20px;
    gap: 10px;
    width: 200px;
    height: 0px;
    background: var(--white);
    box-shadow: 0px 6px 12px rgb(148 163 184 / 15%);


    transition: height 0.6s ease, opacity 0.6s ease;
    -webkit-transition: height 0.6s ease, opacity 0.6s ease;
    -ms-transition: height 0.6s ease, opacity 0.6s ease;
    -moz-transition: height 0.6s ease, opacity 0.6s ease;
    -o-transition: height 0.6s ease, opacity 0.6s ease;
}
#gnb li.main:hover ul{
    visibility:visible;
    height: 230px;
    opacity: 1;
}
#gnb li.main:nth-of-type(2):hover ul{
    width: 330px;
    height: 192px;
}
#lnb, #lnb li.main{
    height: 100%;
}
#lnb li.main{
    position: relative;
}
#lnb li.main>a{
    display: inline-block;
    line-height: 50px;
}
#lnb li.main nav{    
    position: absolute;
    top: 44px;
    left: -18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#lnb li.main nav ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    width: 52px;
    height: 0;

    background: var(--color-200);
    border-radius: 6px;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    overflow: hidden;
}
#lnb li.main nav ul a.act{ color: var(--primary-green); }
#lnb li.main nav ul a{ color: var(--gray); }
#lnb li.main nav ul a:hover{color: var(--primary-green);}

#lnb li.main:hover i{ color: var(--primary-green);}
#lnb li.main:hover nav ul{
    padding: 8px;
    height: 65px;
}
/* 햄버거버튼 */
body.act{overflow-y: hidden }
.wrapper-menu {
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 100;
    width: 40px;
    height: 40px;
    padding: 5px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 330ms ease-out;
}
.wrapper-menu.open {
    transform: rotate(-45deg);  
}
.line-menu {
    background-color: var(--black);
    border-radius: 5px;
    width: 100%;
    height: 3px;
}
.line-menu.half { width: 50%;}
.wrapper-menu:hover .line-menu.half { width: 100%;}
.wrapper-menu.open .line-menu.half { width: 50%;}
.line-menu.start {
    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57), width 0.3s;
    transform-origin: right;
    background-color: var(--primary-green);
}
.open .line-menu.start { transform: rotate(-90deg) translateX(3px); }
.line-menu.end {
    align-self: flex-end;
    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57), width 0.3s;
    transform-origin: left;
    background-color: var(--primary-green);
}
.open .line-menu.end {
    transform: rotate(-90deg) translateX(-3px);
}

#m-lnb{
    position: fixed;
    right: -280px;
    width: 280px;
    height: 100%;
    background: var(--white);
    z-index: 50;
    overflow: auto;
    top:0;
    transition: right 0.3s;
    
    box-shadow: 0px 6px 12px rgba(148, 163, 184, 0.15);
}
#m-lnb.act{right: -0px;}
#m-lnb::-webkit-scrollbar{
    background: var(--white);
    width: 3px;
}
#m-lnb::-webkit-scrollbar-thumb{
    background: var(--color-200);
}
#m-lnb>ul{
    margin-top: 100px;
}
.m-main>a{
    line-height: 1.3em;
    display: block;
    padding: 0.7em 1.5em;
    font-weight: bold;
    border-top: 1px solid var(--color-400);
}
.m-main i{
    float: right;
    transition: 0.3s;
}
.m-main>a i.act{
    transform: rotate(180deg);
}
.m-sub{
    display: none;
}
.m-sub a{
    display: block;
    padding: 0.5em 2em;
    font-size: 0.9em;
    background: var(--color-200);
    border-top: 1px solid var(--color-500);
}
#m-gnb{
    margin-top: 15px;
    padding: 0.5em 1.5em;
    font-size: 0.9em;
}
#m-gnb a{
    border: 1px solid var(--black);
    padding: 0.1em 0.7em;
    border-radius: 30px;
}
#m-gnb a.act{
    background-color: var(--black);
    color: var(--white);
}


/* 풋터 */

footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px calc((100% - var(--l-cont)) / 2);

    width: 100%;

    background: var(--black);
}
footer ul.inner{
    display: flex;
    flex-direction: row;
    align-items: flex-start; 
    gap: 100px;

    width: 100%;
}
footer .logo{
    width: 100%;
    max-width: 205px;
}
footer .logo img{width: 100%;}
footer .contbox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    /* max-width: 620px; */
}
footer .contbox p{color: var(--white);}
footer .contbox li{
    display: flex;
    gap: 20px;
}
footer .family{
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: 100%;
    max-width: 300px;
}
footer .family i{
    transition: 0.3s;
}
footer .family a{
    display: flex;
    line-height: 1;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    min-width: 223px;
    border: 1px solid var(--white);
    border-top: none;
    background: var(--white)
}
#subsite{
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;

    min-width: 223px;

    border: 1px solid var(--white);
}
#subsite i{
    width: 24px;
    color: var(--white);    
    text-align: center;
}
#subsite.act .fa-caret-down{
    transform: rotate(180deg);
}
#subsite p{
    width: calc(100% - 48px);
    color: var(--white);
}
.submenu{display: none;}
@media all and (max-width: 1440px) {
    #inner-hd,
    .inner-l,.inner-m,.inner-s,
    footer .inner{
        padding-left: 2em !important;
        padding-right: 2em !important;
    }
    footer ul.inner{
        gap: 30px;
    }
}
@media all and (max-width: 1200px) {
    footer{
        padding:60px calc((100% - var(--l-cont)) / 2)
    }
    footer ul.inner{
        flex-direction: column-reverse;
    }
    footer .family{
        align-items: flex-start;
    }
    footer ul.inner>li:first-of-type{display: none;}
}
@media all and (max-width: 970px) {
    .display1{
        font-size: 66px;
        line-height: 74px;
    }
    .display2{
        font-size: 52px;
        line-height: 66px;
    }
    .display3{
        font-size: 34px;
        line-height: 42px;
    }
    .display4{
        font-size: 18px;
        line-height: 30px;
    }
    h1{
        font-size: 32px;
        line-height: 44px;
    }
    h2{
        font-size: 22px;
        line-height: 38px;
    }
    #inner-hd nav.menu{display: none;}
    .wrapper-menu{display: flex;}
}
@media all and (max-width: 730px) {
    .display1{
        font-size: 56px;
        line-height: 64px;
    }
    .display2{
        font-size: 42px;
        line-height: 56px;
    }
    .display3{
        font-size: 30px;
        line-height: 40px;
    }
    h2{
        font-size: 22px;
        line-height: 34px;
    }
    h3{
        font-size: 20px;
        line-height: 30px;
    }
    p, div, nav, ul, li{
        color: var(--gray);
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        word-break: keep-all;
    }
    :is(p, div, nav, ul, li).large{
        font-size: 16px;
        line-height: 28px;
    }
    :is(p, div, nav, ul, li).small{
        font-size: 12px;
        line-height: 22px;
    }
    .t400-100,.t400-200,.t400-300,.t400-400,.t400-500,.t400-600,.t400-700,.t400-800,.t400-900{
        font-size: 16px;
    }
    .t300-100,.t300-200,.t300-300,.t300-400,.t300-500,.t300-600,.t300-700,.t300-800,.t300-900{
        font-size: 14px;
    }
    footer .contbox li {
        gap: 5px;
        flex-wrap: wrap;
    }
}
@media all and (max-width: 460px) {
    .display1{
        font-size: 46px;
        line-height: 54px;
    }
    .display2{
        font-size: 32px;
        line-height: 46px;
    }
    .btn{
        padding: 16px 25px;
    }
}
@media all and (max-width: 380px) {
    .display1{
        font-size: 36px;
        line-height: 44px;
    }
    .display2{
        font-size: 28px;
        line-height: 40px;
    }
    .display3{
        font-size: 24px;
        line-height: 36px;
    }
}