/*description page 전용 css*/
main #imsi{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--extra-point-clr);
    color: var(--extra-extra-point-clr);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100vh;
    z-index: 10;
}
#imsi > a{
    margin-bottom: .325rem;
    font-size: calc(var(--spacing-fix-2rem) - var(--spacing-fix-half1rem));
}
#imsi > p {
    color: var(--extra-extra-point-clr);
    will-change: opacity, color;
    animation: gangster 1.5s infinite linear;
    transition: opacity .3s ease, color .3s ease;
}
@keyframes gangster {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/*description section*/
#description-section {
    width: 100%;
    position: relative;
    text-align: center;
}
#description-section .for_sticky {
    height: 200vh;
    margin-top: -100vh;
    width: 100%;
    position: relative;
}
.sticky-one{
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}
#description-section > .for_sticky > .sticky-one {
    background: var(--extra-extra-point-clr);
    z-index: 9;
}
.sticky-one > h1{
    font-size: var(--title-size);
}
/*section*/
.heightSec {
    width: 100%;
    height: 200vh;
    position: relative;
    margin-top: -100vh;
    z-index: 7;
}
.emphasize {
    color: var(--extra-extra-point-clr);
    background: var(--extra-point-clr);
    padding: .325rem;
    border-radius: 3px;
    margin: 0 .25rem;
}

/*intro-section*/
#intro-section{
    position: relative;
    z-index: 8;
    width: 100%;
    height: 200vh;
    margin-top: -100vh;
    background: var(--body-bg-clr);
}
#intro-section .contents{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 8;
    text-align: center;
}
#intro-section .contents > h2 {
    font-size: var(--title-size);
    margin-bottom: 2rem;
}

/*contents1*/
.eachSec {
    position: relative;
}

/*section-wrapper*/
#section-wrapper .h2_wrapper{
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid var(--body-clr); */
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    /* border-top: none; */
}
#section-wrapper .h2_wrapper li{
    text-align: center;
    padding: 2.25rem 0;
    cursor: pointer;
    color: var(--warm-gray);
    transition: color .3s ease, background-color .3s ease;
    will-change: color, background-color;
    position: relative;
}
#section-wrapper .h2_wrapper li:before{
    content: '';
    background-color: #D89A9E;
    height: 2px;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    will-change: width;
    transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
#section-wrapper .h2_wrapper li:not(.on):after{
    content: '';
    background-color: var(--extra-extra-point-clr);
    height: 2px;
    width: 85%;
    position: absolute;
    left: 0;
    top: -1px;
}
.smaller {
    font-size: 14px;
}
#section-wrapper .h2_wrapper li.on{
    color: var(--extra-extra-point-clr);
    background: var(--extra-point-clr);
}
#section-wrapper .h2_wrapper li:not(.on):hover:before {
    width: 85%;
}
.section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 0 0;
    min-height: 100vh;
    transition: opacity .5s linear;
    opacity: 0;
    touch-action: none;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    will-change: opacity;
}
.section.on{
    opacity: 1;
    touch-action: auto;
    visibility: visible;
    position: relative;
}
.section-wrapper2 {
    position: relative;
    background: var(--body-bg-clr);
    z-index: 6;
}
.section-wrapper2 .theCurtain {
    position: absolute;
    will-change: transform;
    width: 150%;
    left: -25%;
    top: 0;
    height: 100%;
    background: var(--extra-point-clr);
    z-index: 6;
    transform-origin: left;
}
.section-wrapper2 .theCurtain.curtainOn{
    animation: theCurtain 2000ms both cubic-bezier(0.77, 0, 0.175, 1);
}
.section-wrapper2 .theCurtain.curtainOn.on{
    animation: theCurtain_reset 2000ms both cubic-bezier(0.77, 0, 0.175, 1);

}
@keyframes theCurtain {
    0% {
        transform: scaleX(1) skewX(30deg);
        transform-origin: left;
    }
    100% {
        transform: scaleX(0) skewX(30deg);
        transform-origin: left;
    }
}
@keyframes theCurtain_reset {
    0% {
        transform: scaleX(0) skewX(20deg);
        transform-origin: left;
    }
    100% {
        transform: scaleX(1) skewX(20deg);
        transform-origin: left;
    }
}
.theTextsWrapper > h3{
    font-size: 2rem;
}
.i-wrapper {
    display: flex;
    gap: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.i-wrapper i{
    font-size: 80px;
}
.for-example{
    display: flex;
    flex-direction: column;
}
.gray-bg {
    background: var(--warm-gray);
    color: var(--body-bg-clr);
    padding: .325rem;
    border-radius: 3px;
    margin: 0 .25rem;
}
#link-section {
    width: 100%;
    min-height: 200vh;
    margin-top: -100vh;
    z-index: 5;
}
#link-section ul{
    display: flex;
    flex-direction: column;
    gap: 1.625rem;
    font-size: 1.25rem;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}
#link-section ul li{
    display: flex;
    gap: 10px;
    align-items: center;
}
#link-section ul li a{
    color: var(--extra-point-clr);
    transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
    position: relative;
}
#link-section ul li a:before{
    content: '';
    bottom: 1px;
    width: 100%;
    position: absolute;
    background: rgb(0, 0, 0);
    height: 1px;
    left: 0;
}
#link-section ul li a:visited{
    color: #032a2d;
}
#link-section ul li a:hover {
    color: var(--extra-extra-point-clr);
    padding: 0 0 2px 0;
}
#link-section ul li a:active {
    color: #ce0e2d;
}