/*============= FONTS =============*/

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");





/*============= BASE =============*/

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;

    font-weight: var(--font-regular);

    letter-spacing: -.05rem;

}



html{

    scroll-behavior: smooth;

}



button,

input{

    outline: none;

    border: none;

}



h1,h2,h3,h4{

    font-weight: var(--font-semi-bold);

}



ul{

    list-style: none;

}



a{

    text-decoration: none;

}



img{

    display: block;

    max-width: 100%;

    height: auto;

}





/*============= VARIABLES CSS =============*/

:root {

    /* --header-height: 7.5rem; */



    /*--------- Colors ---------*/

    --text-color-white: #fff;

    --text-color-gray: #333;

    --text-color-lightgray: #535353;

    --text-color-darkgray: #231815;

    --text-color-blue: #1B53A0;





    /*--------- Font and typography ---------*/

    --body-font: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;

    --h1-font-size: 56px;

    --h2-font-size: 40px;

    --h3-font-size: 28px;

    --normal-font-size: 22px;

    --small-font-size: 20px;

    --smaller-font-size: 16px;



    /*--------- Font weight ---------*/

    --font-regular: 500;

    --font-semi-bold: 700;



}



@media screen and (max-width: 1152px) {

    :root {

        --h1-font-size: 44px;

        --h2-font-size: 30px;

        --h3-font-size: 24px;

        --normal-font-size: 20px;

        --small-font-size: 20px;

        --smaller-font-size: 16px;

    }

}





/*============= REUSABLE CSS CLASSES =============*/

.container {

    max-width: 1194px;

    margin-inline: auto;

}



h2 {

    font-size: var(--h2-font-size);

}



.sub__title {

    font-size: var(--smaller-font-size);

    font-weight: var(--font-semi-bold);

    color: var(--text-color-blue);

    margin-bottom: 4px;

}



.sub__title__description {

    font-size: var(--normal-font-size);

    margin-top: 20px;

}



.row {

    display: flex;

    justify-content: space-between;

    margin-top: 50px;

    flex-wrap: initial;

    --bs-gutter-x: 0;

}







/*============= HEADER =============*/

.header {

    width: 100%;

}



.nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-block: 30px;

}



.nav__logos {

    display: flex;

    /* align-items: center; */

    gap: 20px;

}



.nav__logos .logo__allwin {

    width: 150px;

}



.nav__logos .logo__second {

    width: 264px;

}



.nav__quick a {

    position: relative;

    color: var(--text-color-light);

    font-size: var(--normal-font-size);

    padding-left: 36px;

}



.nav__quick a::before {

    position: absolute;

    content: "";

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 24px;

    height: 21px;

    background: url(../img/icon_home.svg) no-repeat center center;

}





/*============= INTRO =============*/

.intro {

    position: relative;

    width: 100%;

    height: 755px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

    overflow: hidden;

}



.intro .intro__bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

}



.intro__title {

    position: relative;

    z-index: 2;

    color: var(--text-color-white);

}



.intro__logo{

    display: inline-flex;

    gap: 16px;

    text-align: left;

}



.intro__logo img {

    width: 58px;

}



.intro__title h1 {

    font-size: var(--h1-font-size);

    margin-top: 16px;

}



.intro__title h1 span {

    display: block;

    font-size: 38px;

    font-weight: var(--font-regular);

}



.intro__title p {

    font-size: 24px;

    margin-top: 30px;

    line-height: 1.4;

}



.intro__hashtag {

    min-width: 800px;

    margin-top: 150px;

    display: flex;

    justify-content: space-between;

}



.intro__hashtag li a {

    font-size: var(--small-font-size);

    color: var(--text-color-gray);

    font-weight: var(--font-semi-bold);

    background-color: var(--text-color-white);

    padding: 10px 20px;

    border-radius: 22px;

    white-space: nowrap;

    display: inline-block;

    transition: transform .4s;

}



.intro__hashtag li a::before {

    content: '#';

}



.intro__hashtag li a:hover {

    transform: translateY(-4px);

}







/*============= EDUCATION =============*/

.education {

    margin-top: 100px;

}



.education__col {

    flex-basis: 276px;

}



.education__col a {

    color: var(--text-color-gray);

    padding: 30px 25px 25px;

    box-sizing: border-box;

    border: 1px solid #e5e5e5;

    display: flex;

    flex-direction: column;

    border-radius: 0 0 34px;

    transition: 0.5s;

}



.education__col a:hover {

    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);

    transform: translateY(-4px);

}



.education__col h3 {

    font-size: var(--h3-font-size);

    min-height: 94px;

}



.education__col img {

    width: 97px;

    margin-left: auto;

}







/*============= POPULAR =============*/



.popular {

    margin-top: 100px;

}



.popular__col {

    flex-basis: 276px;

}



.popular__col h3 {

    /* position: relative; */

    font-size: var(--normal-font-size);

}



.popular__col p {

    margin-block: 20px 4px;

}



.popular__col a {

    color: var(--text-color-gray);

    display: inline-block; 

    transition: 0.5s;

    /* overflow: hidden; */

}



.popular__col a:hover {

    transform: translateY(-4px);

}



.popular__image {

    /* position: relative; */

    overflow: hidden;

}



.popular__img {

    /* display: block; */

    /* max-width: 100%; */

    /* height: auto; */

    transition: transform .4s;

}



.popular__col:hover .popular__img{

    transform: scale(1.2);

}







/*============= CONTACT =============*/



.contact {

    margin-block: 100px 110px;

}



.contact .row {

    align-items: center;

}



.contact__icon_phone {

    width: 67px;

}



.contact__icon_mail {

    width: 51px;

}



.contact__col {

    flex-basis: 48%;

}



.contact__col:first-child {

    flex: 1;

}



.contact__col:last-child {

    flex: 0 0 684px;

    display: flex;

    justify-content: flex-end;

    gap: 130px;

}



.contact__col a {

    display: inline-flex;

    justify-content: flex-end;

    align-items: center;

    gap: 20px;

    font-size: 30px;

    color: var(--text-color-darkgray);

    white-space: nowrap;

    position: relative;

}



.contact__col a span {

    font-weight: var(--font-semi-bold);

    position: relative;

}



.contact__col a span::after {

    content: '';

    width: 0;

    height: 2px;

    background-color: var(--text-color-gray);

    position: absolute;

    left: 0;

    bottom: -.5rem;

    transition: width .3s;

}



.contact__col a:hover span::after {

    width: 100%;

}



.contact__col a img {

    transition: .3s;

}



.contact__col a:hover img {

    transform: translateY(-3px);

}



.contact__col .sub__title__description {

    display: inline-block;

    position: relative;

}



.contact__col .sub__title__description::after {

    content: '';

    width: 0;

    height: 100%;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    position: absolute;

    border-radius: 1em 0 1em 0;

    z-index: -1;

    background-image: linear-gradient(

                      -100deg,

                      rgba(255, 224, 0, 0.2),

                      rgba(255, 224, 0, 0.7) 95%,

                      rgba(255, 224, 0, 0.1)

    );

    transition: .4s;

}



.contact__col:first-child:hover .sub__title__description::after {

    width: 100%;

}









/*============= SCROLL BAR & UP =============*/



#scroll-bar {

    position: fixed;

    top: 0;

    left: 0;

    height: 0.2rem;

    width: 0%;

    background-color: var(--text-color-blue);

    z-index: 9999;

    /* transition: width 0.5s ease-out; */

}



.scrollup{

    position: fixed;

    right: 1.5rem;

    bottom: -50%;

    background-color: var(--text-color-lightgray);

    padding: 10px;

    display: inline-flex;

    color: var(--text-color-white);

    font-size: 24px;

    line-height: 1;

    z-index: 10;

    transition: bottom .4s, transform .4s;

}



.scrollup:hover{

    transform: translateY(-.25rem);

}



/* Show scroll up */

.show-scroll{

    bottom: 3rem;

}





/*============= BREAKPOINTS =============*/

/* For large devices */



@media screen and (max-width: 1278px){

    .container{

        margin-inline: 6%;

    }

    .row {

        gap: 2%;

    }

    .popular__col {

        flex: 1;

        flex-basis: unset;

    }

    .education__col {

        flex: 1;

        flex-basis: unset;

    }

}



@media screen and (max-width: 1152px){

    .intro {

        height: 620px;

    }

    

    .intro__title h1 span {

        font-size: 26px;

    }



    .intro__title p,

    .contact__col a {

        font-size: var(--small-font-size);

    }



    .nav__quick a,

    .intro__hashtag li a,

    .sub__title__description {

        font-size: var(--smaller-font-size);

    }



    .nav__quick a {

        padding-left: 26px;

    }



    .nav__quick a::before {

        width: 19px;

        height: 17px;

    }



    .intro__hashtag {

        min-width: initial;

        gap: 20px;

        margin-top: 110px;

    }



    .contact__icon_phone {

        width: calc(67px - 4%);

    }



    .contact__icon_mail {

        width: calc(51px - 4%);

    }



    .contact__col:last-child {

        flex: 1.5;

        gap: 100px;

    }

}





@media screen and (max-width: 1023px){

    .intro {

        height: 580px;

    }

    .intro__title h1 {

        margin-top: 24px;

    }

    .intro__title p {

        margin-top: 16px;

    }

    .intro__hashtag {

        margin-top: 80px;

    }

    .education,

    .popular {

        margin-top: 88px;

    }

    .education__col h3 {

        min-height: 60px;

    }

    .education .row,

    .popular .row {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem 1.5rem;

    }

    .education__col img {

        width: 86px;

    }

    .contact {

        margin-block: 88px 40px;

    }

    .contact .row {

        flex-direction: column;

        align-items: initial;

    }

    .contact__col:last-child {

        flex-direction: column;

        gap: 8px;

        margin-top: 20px;

    }

    .contact__col a {

        justify-content: initial;

    }

    .contact__icon_phone {

        width: 29px;

    }

    .contact__icon_mail {

        width: 24px;

        margin-left: 3px;

    }

}





/* For medium devices */

@media screen and (max-width: 768px){

    body {

        min-width: 340px;

    }

    .container {

        margin-inline: 16px;

    }

    .row {

        margin-top: 46px;

    }

    .nav {

        flex-direction: column;

        gap: 16px;

        padding-block: 26px;

    }

    .nav__logos {

        width: 100%;

        display: flex;

        justify-content: space-between;

        /* align-items: center; */

        gap: 20px;

    }

    .nav__logos .logo__allwin {

        /* width: 113px; */

    }

    .nav__logos .logo__second {

        /* width: 189px; */

    }

    .nav__quick a::after {

        width: 19px;

        height: 17px;

    }

    .intro {

        height: 500px;

    }

    .intro__hashtag {

        flex-wrap: wrap;

        width: 300px;

        margin-top: 70px;

        margin-inline: auto;

    }

    .education .row {

        grid-template-columns: repeat(1, 1fr);

        gap: 16px;

    }

    .popular .row {

        grid-template-columns: repeat(1, 1fr);

        gap: 44px;

    }

    .education__col a {

        flex-direction: row;

        align-items: center;

        padding: 16px 16px 18px

    }



}







@media screen and (max-width: 576px){

    

}







/* For small devices */

@media screen and (max-width: 340px){

    

}