/*——————————————————————————————————————————————[ Main Edits ]——————————————————————————————————————————————*/

/* Main Page */
.bannerText-01,
.bannerText-02{
    visibility: hidden;
}

.bannerText-01.active,
.bannerText-02.active{
    visibility: visible;
}

.mainbar_icon_effect-01{
    animation: ease-out autoplay-textBtn 2s infinite;
    transform-origin : center center;
}

.mainbar_icon_effect-02{
    animation: ease-out autoplay-textBtn 2s infinite;
    animation-delay: 1s;
    transform-origin : center center;
}

/* Cloud */
.cloud-animation-3{
    animation: ease-in-out;
    animation-name: autoplay-cloud3;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

.cloud-animation-2{
    animation: ease-in-out;
    animation-name: autoplay-cloud2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.cloud-animation-1{
    animation: ease-in-out;
    animation-name: autoplay-cloud1;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

/* Mascot */

.nisterMascot-animation{
    animation: ease-in-out;
    animation-name: autoplay-nister;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

.nister-animation{
    animation: autoplay-act1 5s ease-out infinite;
}

.angelNister-animation{
    animation: autoplay-act2 5s ease-out infinite;
}

/* Creation Page */
.mobile-sideicon{
    display: none;
}

.branding,
.creationText{
    display: none;
}

.branding.show{
    display: block;
}

.creationText.show
{
    display: flex;
}

#loadHint{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: loading_animation-1 2.5s linear infinite;
}

@keyframes loading_animation-1{
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* Profile Page */
.myProfile-design-animation{
    animation: slowSpin 25s linear infinite;
    transform-origin : center center;
}

.profile-style-animation{
    opacity: 0;
    animation-name: autoplay-style;
    animation-duration: 8s;
    animation-delay: 6s;
    animation-iteration-count: infinite;
}


/* Footer */
.F1-title{
    font-weight: 501; /* Medium Weight */
}


/* Nister Mascot Animation */
@keyframes autoplay-nister{
    0% {
        transform: translateY(-4%);
    }

    25% {
        transform: translateY(-2%);
    }

    50% {
        transform: translateY(-6%);
    }

    75% {
        transform: translateY(-2%);
    }

    100% {
        transform: translateY(-4%);
    }
}

@keyframes autoplay-act1{
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes autoplay-act2{
    0% {
        transform: translateY(-30%);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-30%);
    }
}

/* Cloud Animation */
@keyframes autoplay-cloud1{
    0% {
        transform: translateY(-12%);
    }

    25% {
        transform: translateY(-14%);
    }

    50% {
        transform: translateY(-10%);
    }

    75% {
        transform: translateY(-14%);
    }

    100% {
        transform: translateY(-12%);
    }
}

@keyframes autoplay-cloud2{
    0% {
        transform: translateY(-6%);
    }

    25% {
        transform: translateY(-8%);
    }

    50% {
        transform: translateY(-10%);
    }

    75% {
        transform: translateY(-8%);
    }

    100% {
        transform: translateY(-6%);
    }
}

@keyframes autoplay-cloud3{
    0% {
        transform: translateY(-14%);
    }

    25% {
        transform: translateY(-12%);
    }

    50% {
        transform: translateY(-10%);
    }

    75% {
        transform: translateY(-12%);
    }

    100% {
        transform: translateY(-14%);
    }
}

/* Text-Button Animation */
@keyframes autoplay-textBtn{
    from {
        opacity: 0.3;
        scale: 1;
    }

    to {
        opacity: 0;
        scale: 2.3;
    }
}

/* Showcase Creation Animation */
@keyframes autoplay-showcaseCreation{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Profile Animation */
@keyframes autoplay-style{
    5%{
        opacity: 1;
    }

    6%{
        opacity: 0;
    }

    7%{
        opacity: 1;
    }

    8%{
        opacity: 1;
    }

    9%{
        opacity: 0;
    }

    11%{
        opacity: 1;
    }

    12%{
        opacity: 1;
    }

    13%{
        opacity: 1;
    }

    14%{
        opacity: 1;
    }

    15%{
        opacity: 1;
    }

    16%{
        opacity: 1;
    }

    17%{
        opacity: 1;
    }

    18%{
        opacity: 1;
    }

    19%{
        opacity: 1;
    }

    20%{
        opacity: 1;
    }

    21%{
        opacity: 1;
    }

    22%{
        opacity: 1;
    }

    23%{
        opacity: 1;
    }

    24%{
        opacity: 1;
    }

    25%{
        opacity: 1;
    }

    26%{
        opacity: 1;
    }

    27%{
        opacity: 1;
    }

    28%{
        opacity: 1;
    }

    29%{
        opacity: 1;
    }

    30%{
        opacity: 0;
    }

    31%{
        opacity: 1;
    }

    32%{
        opacity: 0;
    }

    33%{
        opacity: 1;
    }

    34%{
        opacity: 1;
    }

    35%{
        opacity: 0;
    }

    36%{
        opacity: 1;
    }

    37%{
        opacity: 0;
    }
    
    99%{
        opacity: 0;
    }
    
    100%{
        opacity: 0;
    }
}

@keyframes slowSpin{
    100%{
        transform: rotate(360deg);
    }
}

/* SnE Category */
@keyframes flip-icon {
    from {
        transform: rotateY(180deg);
    }

    to {
        transform: rotateY(0deg);
    }
}

@keyframes flip-text {
    from {
        transform: rotateY(-180deg);
    }

    to {
        transform: rotateY(0deg);
    }
}

/*———————————————————————[ Smallest Mobile <--> Smallest Tablet(portrait) ]———————————————————————*/
@media only screen and (max-width: 640px){
    /*———————————————————————[ Main/Creation/Profile-Wrapper Section ]———————————————————————*/
    h3{
        font-size: var(--mobile-H3Size);
    }

    .caption{
        font-size: var(--mobile-captionSize);
        letter-spacing: 1%;
    }

    .padding-container{
        padding: 0 1.25em; /* 0px 20px */
    }

    /*———————————————————————[ Footer Section ]———————————————————————*/
    .footer-1{
        gap: 0.3125em; /* 5px */
    }

    .footMargin-1{
        margin: 1.25em 0 0.9375em 0; /* 20px 0px 15px 0px */
    }

    .footMargin-2{
        margin: 0.3125em 0 0.9375em 0; /* 5px 0px 15px 0px */
    }

    .F1-title{
        font-size: var(--mobile-bodySize);
        letter-spacing: 2%;
    }

    .F2-copyright{
        font-size: var(--mobile-captionSize);
        letter-spacing: 1%;
    }


    /*—————————————————————————————————————————————————————————————————————[ Main Page ]—————————————————————————————————————————————————————————————————————*/  
    .mainbar_icon{
        display: block;
        width: 100%;
        height: 1.70px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .mainicon-01{
        top: 35%;
        left: 15%;
    }

    .mainicon-02{
        top: 39%;
        left: 17.5%;
    }

    .bannerText-01{
        width: 65%;
        top: 12.5%;
        left: 5%;
    }

    .bannerText-02{
        width: 65%;
        top: 55%;
        right: 5%;
    }

    /* Cloud */
    #cloudBoxes_1{
        top: 25%;
        left: 2%;
    }

    #cloudBoxes_2{
        top: 35%;
        right: -60%;
    }

    #cloudBoxes_3{
        top: 55%;
        left: 10%;
    }

    .cloud-1{
        width: clamp(19%, 35vw, 50%);
        height: auto;
    }

    .cloud-2{
        width: clamp(10%, 35vw, 35%);
        height: auto;
    }

    .cloud-3{
        width: clamp(5%, 35vw, 20%);
        height: auto;
    }

    .angelNister{
        top: 47.5%;
        right: -10%;
    }

    .nister-animation{
        width: 70px;
        height: auto;
    }
    
    .angelNister-animation{
        width: 85px;
        height: auto;
    }

    /*—————————————————————————————————————————————————————————————————————[ Creation Page ]—————————————————————————————————————————————————————————————————————*/    
    .padding-creation-container{
        padding: 0.9375em 1.25em 0 1.25em; /* 15px 20px 0px 20px */
    }
    
    #creation-wrapper{
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }

    #creation-sidebar{
        width: 106.5px;
        left: -106.5px;
        transition: 0.25s ease-in;
    }

    #creation-sidebar.active{
        left: 0;
    }

    .mobile-sideicon{
        display: block;
    }

    .sidebar_icon{
        display: block;
        width: 100%;
        height: 1.70px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .sidebar_arrow-1{
        width: 30%;
        border-radius: 0 25px 0 0;
        left: 61%;
        top: 26.5px;
        transform: rotate(225deg);
        transform-origin: 0 0;
        transition: 0.25s ease-in;
    }

    .sidebar_arrow-2{
        width: 30%;
        border-radius: 0 0 25px 0;
        left: 63%;
        top: 24px;
        transform: rotate(135deg);
        transform-origin: 0 0;
        transition: 0.25s ease-in;
    }

    .sidebar_arrow-1.active{
        left: 36%;
        top: 25.5px;
        transform: rotate(315deg);
    }

    .sidebar_arrow-2.active{
        left: 38%;
        top: 23px;
        transform: rotate(45deg);
    }

    /* Creation Container */
    #mobile_version{
        display: block;
    }

    #tablet-port_version{
        display: none;
    }

    #tablet-land_version{
        display: none;
    }

    #desktop_version{
        display: none;
    }


    /*—————————————————————————————————————————————————————————————————————[ Profile Page ]—————————————————————————————————————————————————————————————————————*/
    .profile-container,
    .SnE-container,
    .Spec-container,
    .CP-container{
        margin: 0.9375em 0; /* 15px 0px */
        overflow: hidden;
    }

    .p-sec-1,
    .p-sec-2{
        grid-template-columns: auto;
        grid-template-rows: auto;
        place-items: center;
    }


    /* Profile Container */
    .myProfile-design{
        width: 80%;
    }

    .myProfile-photo{
        margin: 0;
    }

    .profile-style{
        top: -23px;
        scale: 90%;
    }

    .roleIntroduction{
        width: 325px;
    }

    .profile-2{
        margin: 0.3125em 0 0.9375em 0; /* 5px 0px 15px 0px */
        align-items: center;
        gap: 0.9375em; /* 15px */
    }

    .p2-textBox{
        gap: 0.9375em; /* 15px */
    }


    /* Spec Section */
    .Spec-container{
        gap: 0.9375em; /* 15px */
    }

    .Spec-cat{
        grid-template-columns: 185px 185px 185px 185px 185px 185px 185px 185px 185px 185px 185px 185px;
        grid-template-rows: auto;
        gap: 0.78125em; /* 12.5px */
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* Skill-Box */
    #Spec_sec{
        width: 185px;
        padding: 1.25em; /* 20px */
        gap: 0.9375em; /* 15px */
        box-shadow: -4px -4px 14px inset #a1a1a1;
        transition: ease-out 0.15s;
        cursor: pointer;
    }

    #Spec_sec.active{
        box-shadow: 4px 4px 14px inset #a1a1a1;
    }

    #Spec_box{
        grid-template-columns: auto;
        grid-template-rows: auto;
        place-items: center;
        height: 95px;
        grid-gap: 0;
    }

    #flip_Spec_icon{
        display: block;
        width: 80px;
        height: 80px;
        animation: flip-icon 0.35s ease-in;
    }

    #flip_Spec_text{
        text-align: center;
        display: none;
        animation: flip-text 0.35s ease-in;
    }

    #flip_Spec_icon.active{
        display: none;
    }

    #flip_Spec_text.active{
        display: block;
    }


    /* SnE_CP Container */
    .SnE_CP-container{
        padding: 0 1.25em; /* 20px */
        flex-direction: column;
        gap: 0;
    }
    
    /* SnE Container */
    .SnE-container{
        gap: 0.9375em; /* 15px */
    }

    .SnE-box{
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-gap: 0.625em; /* 10px */
    }

    .Str-Exp-box{
        align-items: center;
        padding: 1.25em; /* 20px */
        gap: 1.25em; /* 20px */
    }

    #Str-Exp_icon{
        width: 65px;
        height: 65px;
    }

    .Str-Exp_text{
        width: 70%;
        height: auto;
    }

    .Str-Exp_text-H3-edit{
        font-size: 1.1475rem; /* 18.36px */
        line-height: 1.25;
        word-spacing: -0.25px;
    }

    .Str-Exp_text-P-edit{
        font-size: clamp(0.84375rem, 1vw, 0.96875rem); /* 13.5px -> 15.5px */
        line-height: 1.25;
    }
}

/*———————————————————————[ Starting from Smallest Tablet(portrait) ]———————————————————————*/
@media only screen and (min-width: 640px){
    /*———————————————————————[ Main/Creation/Profile-Wrapper Section ]———————————————————————*/
    h3{
        font-size: var(--tablet_port-H3Size);
    }

    .caption{
        font-size: var(--tablet_port-N-land-captionSize);
        letter-spacing: 2%;
    }
    
    .padding-container{
        padding: 0 3.75em; /* 0px 60px */
    }


    /*———————————————————————[ Footer Section ]———————————————————————*/
    .footer-1{
        gap: 0.625em; /* 10px */
    }

    .footMargin-1{
        margin: 1.25em 0 0.625em 0; /* 20px 0px 10px 0px */
    }

    .footMargin-2{
        margin: 0.625em 0; /* 10px 0px */
    }

    .F1-title{
        font-size: var(--tablet_port-bodySize);
        letter-spacing: 2%;
    }

    .F2-copyright{
        font-size: var(--tablet_port-N-land-captionSize);
        letter-spacing: 2%;
    }


    /*—————————————————————————————————————————————————————————————————————[ Main Page ]—————————————————————————————————————————————————————————————————————*/  
    .mainicon-01{
        top: 36.5%;
        left: 11.5%;
    }

    .mainicon-02{
        top: 40.5%;
        left: 12.5%;
    }
    
    .bannerText-01{
        width: 28%;
        top: 25%;
        left: 20%;
    }

    .bannerText-02{
        width: 28%;
        top: 42.5%;
        right: 20%;
    }

    /* Cloud */
    #cloudBoxes_1{
        top: 10%;
        left: 5%;
    }

    #cloudBoxes_2{
        top: 25%;
        right: -70%;
    }

    #cloudBoxes_3{
        top: 45%;
        left: 15%;
    }

    .cloud-1{
        width: clamp(10%, 25vw, 30%);
        height: auto;
    }

    .cloud-2{
        width: clamp(5%, 35vw, 25%);
        height: auto;
    }

    .cloud-3{
        width: clamp(5%, 35vw, 20%);
        height: auto;
    }

    .angelNister{
        top: 45%;
        right: -8%;
    }

    .nister-animation{
        width: 135px;
        height: auto;
    }
    
    .angelNister-animation{
        width: 135px;
        height: auto;
    }

    
    /*—————————————————————————————————————————————————————————————————————[ Creation Page ]—————————————————————————————————————————————————————————————————————*/
    .padding-creation-container{
        padding: 1.25em 1.25em 0 1.25em; /* 20px 20px 0px 20px */
    }
    
    #creation-wrapper{
        grid-template-columns: 90%;
        grid-template-rows: auto;
    }

    #creation-sidebar{
        width: 10%;
        left: 0;
    }

    /* Creation Container */
    #mobile_version{
        display: none;
    }

    #tablet-port_version{
        display: block;
    }

    #tablet-land_version{
        display: none;
    }

    #desktop_version{
        display: none;
    }


    /*—————————————————————————————————————————————————————————————————————[ Profile Page ]—————————————————————————————————————————————————————————————————————*/
    .profile-container,
    .SnE-container,
    .Spec-container,
    .CP-container{
        margin: 1.25em 0; /* 20px 0px */
        overflow: hidden;
    }

    .p-sec-1,
    .p-sec-2{
        grid-template-columns: auto;
        grid-template-rows: auto;
        place-items: center;
    }

    /* Profile-Container */
    .myProfile-design{
        width: clamp(65%, 85%, 70%);
    }

    .myProfile-photo{
        margin: 0 5%;
    }

    .profile-style{
        top: clamp(-105px , 85%, -125px);
        scale: clamp(65% , 85%, 75%);
    }

    .roleIntroduction{
        width: 400px;
    }

    .profile-2{
        margin: 0.3125em 0 1.25em 0; /* 5px 0px 20px 0px */
        align-items: center;
        gap: 1.25em; /* 20px */
    }

    .p2-textBox{
        gap: 1.25em; /* 20px */
    }


    /* Spec Section */
    .Spec-container{
        gap: 1.25em; /* 20px */
    }

    .Spec-cat{
        grid-template-columns: 185px 185px 185px 185px 185px 185px 185px 185px 185px 185px 185px 185px;
        grid-template-rows: auto;
        grid-gap: 0.78125em; /* 12.5px */
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* Skill-Box */
    #Spec_sec{
        width: 185px;
        padding: 0.9375em;  /* 15px */
        gap: 0.9375em;  /* 15px */
        box-shadow: -4px -4px 14px inset #a1a1a1;
        transition: ease-out 0.15s;
        cursor: pointer;
    }

    #Spec_sec.active{
        box-shadow: 4px 4px 14px inset #a1a1a1;
    }

    #Spec_box{
        grid-template-columns: auto;
        grid-template-rows: auto;
        place-items: center;
        height: 110px;
        grid-gap: 1.25em; /* 20px */
    }

    #flip_Spec_icon{
        display: block;
        width: 70px;
        height: 70px;
        animation: flip-icon 0.35s ease-in;
    }

    #flip_Spec_text{
        text-align: center;
        display: none;
        animation: flip-text 0.35s ease-in;
    }

    #flip_Spec_icon.active{
        display: none;
    }

    #flip_Spec_text.active{
        display: block;
    }


    /* SnE_CP Container */
    .SnE_CP-container{
        padding: 0 3.75em; /* 0 60px */
        flex-direction: column;
        gap: 0;
    }
    
    /* SnE Container */
    .SnE-container{
        gap: 1.25em; /* 20px */
    }


    .SnE-box{
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-gap: 0.625em; /* 10px */
    }

    .Str-Exp-box{
        align-items: center;
        padding: 1.25em; /* 20px */
        gap: 1.25em; /* 20px */
    }

    #Str-Exp_icon{
        width: 65px;
        height: 65px;
    }

    .Str-Exp_text{
        width: 85%;
        height: auto;
    }

    .Str-Exp_text-H3-edit{
        font-size: 1.1475rem; /* 18.36px */
        line-height: 1.25;
        word-spacing: -0.25px;
    }

    .Str-Exp_text-P-edit{
        font-size: 0.96875rem; /* 15.5px */
        line-height: 1.25;
    }

    /* CP Container */
    .radar_chart{
        width: auto;
        height: 100%;
    }
}

/*———————————————————————[ Ending at Smallest Tablet(portrait) <--> Starting from Smallest Tablet(landscape) ]———————————————————————*/
@media only screen and (min-width: 1024px){
    /*———————————————————————[ Main/Creation/Profile-Wrapper Section ]———————————————————————*/
    h3{
        font-size: var(--tablet_land-H3Size);
    }

    .caption{
        font-size: var(--tablet_port-N-land-captionSize);
        letter-spacing: 2%;
    }
    
    .padding-container{
        padding: 0 1.25em; /* 20px */
    }


    /*———————————————————————[ Footer Section ]———————————————————————*/
    .footer-1{
        gap: 0.625em; /* 10px */
    }

    .footMargin-1{
        margin: 1.25em 0 0.625em 0; /* 20px 0px 10px 0px */
    }

    .footMargin-2{
        margin: 0.625em 0; /* 10px */
    }

    .F1-title{
        font-size: var(--tablet_land-bodySize);
        letter-spacing: 2%;
    }

    .F2-copyright{
        font-size: var(--tablet_port-N-land-captionSize);
        letter-spacing: 2%;
    }


    /*—————————————————————————————————————————————————————————————————————[ Main Page ]—————————————————————————————————————————————————————————————————————*/  
    .mainicon-01{
        top: 38.5%;
        left: 10.5%;
    }

    .mainicon-02{
        top: 41%;
        left: 13%;
    }
    
    .bannerText-01{
        top: 12%;
        left: 2.5%;
        width: 30%;
    }

    .bannerText-02{
        top: 26%;
        right: 7%;
        width: 30%;
    }

    /* Cloud */
    #cloudBoxes_1{
        top: 10%;
        left: 6%;
    }

    #cloudBoxes_2{
        top: 20%;
        right: -65%;
    }

    #cloudBoxes_3{
        top: 45%;
        left: 20%;
    }

    .cloud-1{
        width: clamp(5%, 25vw, 22%);
        height: auto;
    }

    .cloud-2{
        width: clamp(5%, 35vw, 25%);
        height: auto;
    }

    .cloud-3{
        width: clamp(5%, 35vw, 20%);
        height: auto;
    }

    .angelNister{
        top: 45%;
        right: -8%;
    }

    .nister-animation{
        width: 200px;
        height: auto;
    }
    
    .angelNister-animation{
        width: 200px;
        height: auto;
    }


    /*—————————————————————————————————————————————————————————————————————[ Creation Page ]—————————————————————————————————————————————————————————————————————*/
    .padding-creation-container{
        padding: 1.25em 1.25em 0 1.25em; /* 20px 20px 0px 20px */
    }
    
    #creation-wrapper{
        grid-template-columns: 92%;
        grid-template-rows: auto;
    }

    #creation-sidebar{
        width: 8%;
        left: 0;
    }

    /* Creation Container */
    #mobile_version{
        display: none;
    }

    #tablet-port_version{
        display: none;
    }

    #tablet-land_version{
        display: block;
    }

    #desktop_version{
        display: none;
    }

    .creationWorks{
        cursor: pointer;
    }


    /*—————————————————————————————————————————————————————————————————————[ Profile Page ]—————————————————————————————————————————————————————————————————————*/
    .profile-container{
        padding: 1.25em; /* 20px */
    }
    
    .profile-container,
    .Spec-cat{
        margin: 1.25em 0; /* 20px 0px */
    }

    .Spec-container,
    .CP-container{
        margin: 0;
    }

    .p-sec-1{
        grid-template-columns: 45% 55%;
        grid-template-rows: auto;
    }

    .p-sec-2{
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        place-items: start;
    }

    /* Profile-Container */
    .myProfile-design{
        width: 80%;
    }

    .myProfile-photo{
        margin: 0 5%;
    }

    .profile-style{
        top: -33px;
        scale: 90%;
    }

    .roleIntroduction{
        width: 400px;
    }

    .profile-2{
        margin: 0 1.25em 0 0; /* 0px 20px 0px 0px */
        align-items: start;
        gap: 1.25em; /* 20px */
    }

    .p2-textBox{
        gap: 1.25em; /* 20px */
    }


    /* Spec Section */
    .Spec-container{
        gap: 0;
    }

    .Spec-cat{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 1.25em; /* 20px */
    }

    /* Skill-Box */
    #Spec_sec{
        width: 100%;
        padding: 1.25em; /* 20px */
        gap: 0.9375em;  /* 15px */
        box-shadow: -4px -4px 14px inset #a1a1a1;
        transition: ease-out 0.15s;
        cursor: pointer;
    }

    #Spec_sec.active{
        box-shadow: 4px 4px 14px inset #a1a1a1;
    }

    #Spec_box{
        grid-template-columns: auto;
        grid-template-rows: auto;
        place-items: center;
        height: 110px;
        grid-gap: 1.25em; /* 20px */
    }

    #flip_Spec_icon{
        display: block;
        width: 70px;
        height: 70px;
        animation: flip-icon 0.35s ease-in;
    }

    #flip_Spec_text{
        text-align: center;
        display: none;
        animation: flip-text 0.35s ease-in;
    }

    #flip_Spec_icon.active{
        display: none;
    }

    #flip_Spec_text.active{
        display: block;
    }


    /* SnE_CP Container */
    .SnE_CP-container{
        padding: 0 1.25em 0 0; /* 20px */
        flex-direction: column;
        gap: 1.25em; /* 20px */
    }
    
    /* SnE Container */
    .SnE-container{
        margin: 0;
        gap: 1.25em; /* 20px */
    }

    .SnE-box{
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-gap: 0.625em; /* 10px */
    }

    .Str-Exp-box{
        align-items: start;
        padding: 1.25em; /* 20px */
        gap: 1.25em; /* 20px */
    }

    #Str-Exp_icon{
        width: 65px;
        height: 65px;
    }

    .Str-Exp_text{
        width: 95%;
        height: auto;
    }

    .Str-Exp_text-H3-edit{
        font-size: clamp(1.1475rem, 1.2vw, 1.46875rem); /* 18.36px -> 23.5px */
        line-height: 1.25;
        word-spacing: -0.25px;
    }

    .Str-Exp_text-P-edit{
        font-size: clamp(0.84375rem, 1vw, 0.96875rem); /* 13.5px -> 15.5px */
        line-height: 1.25;
    }
    
    /* CP Container */
    .radar_chart{
        width: auto;
        height: 100%;
    }
}

/*———————————————————————[ Starting from Smallest Desktop ]———————————————————————*/
@media only screen and (min-width: 1280px){
    /*———————————————————————[ Main/Creation/Profile-Wrapper ]———————————————————————*/
    h3{
        font-size: var(--desktop-H3Size);
    }

    .caption{
        font-size: var(--desktop-captionSize);
        letter-spacing: 2%;
    }
    
    .padding-container{
        padding: 0 2.5em; /* 40px */
    }


    /*———————————————————————[ Footer Section ]———————————————————————*/
    .footer-1{
        gap: 0.9375em;  /* 15px */
    }

    .footMargin-1{
        margin: 1.875em 0 1.25em 0; /* 30px 0px 20px 0px */
    }

    .footMargin-2{
        margin: 0.9375em 0; /* 15px 0px */
    }

    .F1-title{
        font-size: var(--desktop-bodySize);
        letter-spacing: 2%;
    }

    .F2-copyright{
        font-size: var(--desktop-captionSize);
        letter-spacing: 2%;
    }


    /*—————————————————————————————————————————————————————————————————————[ Main Page ]—————————————————————————————————————————————————————————————————————*/  
    .mainicon-01{
        top: 38.5%;
        left: 8.5%;
    }

    .mainicon-02{
        top: 41%;
        left: 10%;
    }
    
    .bannerText-01{
        top: 11.5%;
        left: 6.5%;
        width: 25%;
    }

    .bannerText-02{
        top: 29.5%;
        right: 12%;
        width: 25%;
    }

    /* Cloud */
    #cloudBoxes_1{
        top: 13%;
        left: 10%;
    }

    #cloudBoxes_2{
        top: 27%;
        right: -65%;
    }

    #cloudBoxes_3{
        top: 50%;
        left: 24%;
    }

    .cloud-1{
        width: clamp(10%, 50vw, 17.5%);
        height: auto;
    }

    .cloud-2{
        width: clamp(5%, 35vw, 20%);
        height: auto;
    }

    .cloud-3{
        width: clamp(5%, 35vw, 15%);
        height: auto;
    }

    .angelNister{
        top: 45%;
        right: -5%;
    }

    .nister-animation{
        width: 185px;
        height: auto;
    }
    
    .angelNister-animation{
        width: 225px;
        height: auto;
    }


    /*—————————————————————————————————————————————————————————————————————[ Creation Page ]—————————————————————————————————————————————————————————————————————*/
    .padding-creation-container{
        padding: 1.875em 2.5em 0 2.5em; /* 30px 40px 0px 40px */
    }
    
    #creation-wrapper{
        grid-template-columns: 92%;
        grid-template-rows: auto;
    }

    #creation-sidebar{
        width: 8%;
        left: 0;
    }

    /* Creation Container */
    #mobile_version{
        display: none;
    }

    #tablet-port_version{
        display: none;
    }

    #tablet-land_version{
        display: none;
    }

    #desktop_version{
        display: block;
    }

    .creationWorks{
        cursor: pointer;
    }


    /*—————————————————————————————————————————————————————————————————————[ Profile Page ]—————————————————————————————————————————————————————————————————————*/
    .profile-container{
        padding: 1.875em; /* 30px */
    }
    
    .profile-container,
    .Spec-cat{
        margin: 1.875em 0; /* 30px 0px */
    }

    .Spec-container,
    .CP-container{
        margin: 0;
    }

    .p-sec-1{
        grid-template-columns: 45% 55%;
        grid-template-rows: auto;
    }
    
    .p-sec-2{
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        place-items: start;
    }

    /* Profile-Container */
    .myProfile-design{
        width: 80%;
    }

    .myProfile-photo{
        margin: 0 5%;
    }

    .profile-style{
        top: -45px;
        scale: 90%;
    }
    
    .roleIntroduction{
        width: 425px;
    }

    .profile-2{
        margin: 0 1.875em 0 0; /* 0px 30px 0px 0px */
        align-items: start;
        gap: 1.25em; /* 20px */
    }

    .p2-textBox{
        gap: 1.25em; /* 20px */
    }


    /* Spec Section */
    .Spec-container{
        gap: 0;
    }

    .Spec-cat{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 0.9375em; /* 15px */
    }

    /* Skill-Box */
    #Spec_sec{
        width: 100%;
        padding: 1.25em; /* 20px */
        gap: 1.25em; /* 20px */
        box-shadow: none;
        cursor: default;
    }

    #Spec_sec.active{
        box-shadow: none;
    }

    #Spec_box{
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        place-items: start;
        height: 85px;
        grid-gap: 0.9375em; /* 15px */
    }

    #flip_Spec_icon{
        display: block;
        width: 75px;
        height: 75px;
        animation: none;
    }

    #flip_Spec_text{
        text-align: left;
        display: block;
        animation: none;
    }
    
    #flip_Spec_icon.active{
        display: block;
    }

    #flip_Spec_text.active{
        display: block;
    }

    .flipHint-icon{
        display: none;
    }


    /* SnE_CP Container */
    .SnE_CP-container{
        padding: 0 2.5em 0 0; /* 0px 40px */
        flex-direction: column;
        gap: 1.875em; /* 30px */
    }
    
    /* SnE Container */
    .SnE-container{
        margin: 0;
        gap: 1.875em; /* 30px */
    }

    .SnE-box{
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-gap: 0.78125em; /* 12.5px */
    }

    .Str-Exp-box{
        align-items: start;
        padding: 1.25em; /* 20px */
        gap: 1.25em; /* 20px */
    }

    #Str-Exp_icon{
        width: 65px;
        height: 80px;
    }

    .Str-Exp_text{
        width: 85%;
        height: auto;
    }

    .Str-Exp_text-H3-edit{
        font-size: 1.46875rem; /* 23.5px */
        line-height: 1.35;
        word-spacing: -0.15px;
    }

    .Str-Exp_text-P-edit{
        font-size: clamp(0.84375rem, 1vw, 1.21875rem); /* 13.5px -> 19.5px */
        line-height: 1.35;
    }
    
    /* CP Container */
    .radar_chart{
        width: auto;
        height: 100%;
    }
}