/*******************************************************************************
********************************************************************************
                                  layout
********************************************************************************
*******************************************************************************/
.art-ual * {
    font-family: 'NotoSansCJKkr', serif;
    line-height: 1.2;

}

.art-ual {
    text-align: center;
}

.art-ual-section01 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/art-ual/art-ual-section01-bg01-220127.jpg") no-repeat center top;
    background-size: cover;
}

.art-ual-section02 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/art-ual/art-ual-section02-bg01-220127.jpg") no-repeat center top;
    background-size: cover;
}

.art-ual-section03 {
    background: #fff;
}

.art-ual-section04 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/art-ual/art-ual-section04-bg01-220127.jpg") no-repeat center top;
    background-size: cover;
}

.art-ual-section05 {
    background: #E8E7E7;
}

.art-ual-section06 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/art-ual/art-ual-section06-bg01-220127.jpg") no-repeat center top;
    background-size: cover;
}

.art-ual-section07 {
    background: #000;
}


.art-ual-maxWidth {
    width: 1080px;
    margin: 0 auto;
    padding: 120px 0;
    box-sizing: border-box;
}


.art-ual-title {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 3rem;
    font-weight: 700;
}

.art-ual-title > strong {
    color: #FFB400;
}


.art-ual-text {
    font-size: 1.7rem;
    color: #fff;
    font-weight: 400;
}

.art-ual-text span {
    color: #FFB400;
}

.art-ual-text-imgBox {
    display: inline-block;
    width: 15rem;
    margin-bottom: 1rem;
}

.art-ual-text-imgBox > img {
    width: 100%;
}

@media screen and (max-width:1080px) {
    .art-ual-maxWidth {
        width: 100%;
        padding: 6rem 1.5rem;
    }
}
@media screen and (max-width:767px) {
    .art-ual-text{
        font-size: 3.5vw;
        min-font-size: 13px;
    }
    .art-ual-title {
        font-size: 4.8vw;
        margin-bottom: 1.5rem;
    }
}
/*******************************************************************************
********************************************************************************
                                  메인 비주얼
********************************************************************************
*******************************************************************************/
.art-ual-section01 > div {
    padding-top: 12rem;
}

.art-ual-section01-imgBox {
    display: inline-block;
    width: 15rem;
    margin: 0 auto 3rem;
}

.art-ual-section01-imgBox > img {
    width: 100%;
}

.art-ual-section01-title {
    color: #fff;
    margin-bottom: 3.4rem;
}

.art-ual-section01-title > span {
    font-size: 2.1rem;
    color: #FFB400;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 1rem;
}

.art-ual-section01-title > strong {
    font-size: 5rem;
}

.art-ual-section01-title > strong > span {
    font-weight: 400;
}

@media screen and (max-width:767px) {
    .art-ual-section01 > div {
        padding-top: 18vw;
        background: #00000060;
    }

    .art-ual-section01-imgBox {
        width: 15rem;
        margin: 0 auto 3rem;
    }

    .art-ual-section01-title {
        margin-bottom: 6vw;
    }

    .art-ual-section01-title > span {
        font-size: 5vw;
        margin-bottom: 2vw;
    }

    .art-ual-section01-title > strong {
        font-size: 10vw;
    }
}
@media screen and (max-width:479px) {
    .art-ual-section01-imgBox {
        width: 60%;
    }
}


/*******************************************************************************
********************************************************************************
                                  세계랭킹 2위
********************************************************************************
*******************************************************************************/
.art-ual-section02-imgBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.art-ual-section02-imgBox > span {
    max-width: 45%;
    display: inline-block;
}

.art-ual-section02-imgBox > span > img {
    width: 100%;
}

.art-ual-section02-imgBox > span:last-child > img:first-child {
    width: 12.3rem;
    margin-bottom: 1rem;
}

.art-ual-section02-imgBox > span:last-child > img:last-child {
    width: 20rem;
}
@media screen and (max-width:767px) {
    .art-ual-section02-imgBox {
        display: block;
        width: 100%;
    }
    .art-ual-section02-imgBox > span {
        display: flex;
        justify-content: center;
        align-items: start;
        max-width: 100%;
    }
    .art-ual-section02-imgBox > span:first-child{
        width: 80%;
        margin: 0 auto 2rem ;
    }
    .art-ual-section02-imgBox > span:last-child > img {
        margin: 0 1vw;
    }
    .art-ual-section02-imgBox > span:last-child > img:first-child  {
        width: 28.5541vw;
    }
    .art-ual-section02-imgBox > span:last-child > img:last-child {
        width: 46.7210vw;
    }
}
/*******************************************************************************
********************************************************************************
                              영국 6개 예술 대학교 연합
********************************************************************************
*******************************************************************************/
.art-ual-section03 .art-ual-title {
    color: #000;
}

.art-ual-section03-con {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: .9rem;
    row-gap: 1.5rem;
}

.art-ual-section03-con-col {
    width: 100%;
}

.art-ual-section03-con-imbBox {
    width: 100%;
    margin-bottom: 1rem;
}

.art-ual-section03-con-imbBox > img {
    width: 100%;
}

.art-ual-section03-con-title {
    text-align: left;
    font-size: 1.4rem;
    margin-bottom: .5rem;
}

.art-ual-section03-con-text {
    text-align: left;
    color: #767676;
    font-size: .9rem;
}
@media screen and (max-width: 1080px) {
    .art-ual-section03-con {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width:767px) {
    .art-ual-section03-con-title {
        font-size: 3vw;
    }
    .art-ual-section03-con-text {
        font-size: 2.4vw;
    }
}
@media screen and (max-width:479px) {
    .art-ual-section03-con {
        grid-template-columns: repeat(1, 1fr);
    }
    .art-ual-section03-con-imbBox {
        width: 80%;
        margin: 0 auto 1rem;
    }
    .art-ual-section03-con-title {
        text-align: center;
        font-size: 4vw;
    }
    .art-ual-section03-con-text {
        font-size: 3vw;
        text-align: center;
    }
}

/*******************************************************************************
********************************************************************************
                                  두가지 루트
********************************************************************************
*******************************************************************************/
.art-ual-section04-table {
    margin-bottom: 3.3rem;
}

.art-ual-section04-table table {
    width: 100%;
    background: #F3F3F3;
    margin-bottom: .75rem;
    border-radius: .4rem;
}

.art-ual-section04-table th {
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    padding: .6rem 0;
    color: #191919;
}

.art-ual-section04-table thead th {
    position: relative;
}

.art-ual-section04-table tbody th {
    width: 10%;
}

.art-ual-section04-table th > strong {
    font-size: 1.4rem;
}

.art-ual-section04-table th > strong > span {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
}

.art-ual-section04-table th > strong > strong {
    background: #FECE06;
    display: inline-block;
    padding: 0 .2rem;
}

.art-ual-section04-table td {
    width: 45%;
    color: #767676;
    padding: .8rem 0;
    background: #fff;
    font-size: .9rem;
}

.art-ual-section04-table tbody > tr:first-child > td:nth-child(2) {
    border-radius: .4rem 0 0 0;
}

.art-ual-section04-table tbody > tr:first-child > td:nth-child(3) {
    border-radius: 0 .4rem 0 0;
}

.art-ual-section04-table tbody > tr:last-child > td:nth-child(2) {
    border-radius: 0 0 0 .4rem;
}

.art-ual-section04-table td > ul {
    display: inline-block;
    width: 75%;
    list-style: outside;
}

.art-ual-section04-table td > ul > li {
    text-align: left;
    margin-bottom: .2rem;
}

.art-ual-section04-table td span {
    color: #C20000;
}

.art-ual-section04-table-text {
    font-weight: 300;
    font-size: .9rem;
    text-align: left;
    color: #fff;
}

.art-ual-section04-table-text > span {
    font-weight: 500;
    text-align: left;
    display: inline-block;
    margin-bottom: .5rem;


}


@media screen and (max-width:767px) {
    .art-ual-section04-table th {
        font-size: 2.0860vw;
    }
    .art-ual-section04-table th > strong {
        font-size: 2.6076vw;
    }
    .art-ual-section04-table td{
        font-size: 1.8253vw;
    }
    .art-ual-section04-table-text {
        font-size: 1.8253vw;
    }
}


/*******************************************************************************
********************************************************************************
                                  파운데이션 과정 소개
********************************************************************************
*******************************************************************************/
.art-ual-section05 .art-ual-title {
    color: #000;
    margin-bottom: 1rem;
}

.art-ual-section05 .art-ual-section05-text {
    font-size: 1.4rem;
    margin-bottom: 3rem;
}

.art-ual-section05 .art-ual-section05-text > span {
    color: #C20000;
}

.art-ual-section05-con1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    margin-bottom: 3rem;
}

.art-ual-section05-con1-col {
    width: 100%;
}

.art-ual-section05-con-col1-imBox {
    width: 100%;
    margin-bottom: 1.25rem;
    height: 10.8rem;
    border-radius: .4rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: .5rem .4rem 1rem #00000015;
}

.art-ual-section05-con-col1-imBox > span {
    width: 60%;
    display: inline-block;
    margin: 0 auto;
}

.art-ual-section05-con-col1-imBox > span > img {
    width: 100%;
    margin-bottom: .4rem;
}

.art-ual-section05-con-col1-imBox > span > span {
    color: #767676;
    font-size: .9rem;
}

.art-ual-section05-con1-col-text {
    font-size: 1rem;
    color: #191919;
}

.art-ual-section05-con1-col-text > span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    background: #000;
    color: #fff;
    line-height: 1rem;
}

.art-ual-section05-con2 {
    margin-bottom: 6rem;
}

.art-ual-section05-con2-spanFlex {
    display: flex;
    justify-content: center;
    margin-bottom: .5rem;
}

.art-ual-section05-con2-spanFlex > span {
    display: inline-block;
    padding: .4rem .7rem;
    background: #C20000;
    color: #fff;
    border-radius: .4rem;
    margin: 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
}

.art-ual-section05-con2-spanFlex > span:first-child {
    background: #FFB400;
}

.art-ual-section05-con2-title {
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.art-ual-section05-con2-title > span {
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    font-size: 1.1rem;
    line-height: 1.7rem;
    border-radius: 50%;
    margin-right: .5rem;
    background: #000;
    color: #fff;
}

.art-ual-section05-con2-table table {
    border-radius: .4rem;
    background: #F6F5F5;
    box-shadow: .5rem .5rem 1rem #00000030;
    width: 100%;
}

.art-ual-section05-con2-table table th {
    width: 20%;
}

.art-ual-section05-con2-table table td {
    text-align: left;
    width: 80%;
    padding: .9rem;
    color: #767676;
    font-size: .9rem;
    line-height: 1.4;
    background: #fff;
}

.art-ual-section05-con2-table table tr:first-child td:nth-child(2) {
    border-radius: .4rem 0 0 0;
}

.art-ual-section05-con2-table table tr:last-child td:nth-child(2) {
    border-radius: 0 0 0 .4rem;
}

.art-ual-section05-con2-table table td > span {
    color: #C20000;

}

.art-ual-section05-con2-table table td > ul {
    list-style: inside;
}

.art-ual-section05-con2-table table td > ul > li > span {
    color: #C20000;

}

.art-ual-section05-con2-arrowText-imgBox {
    width: 9.25rem;
    margin: 0 auto 1.1rem;
}

.art-ual-section05-con2-arrowText-imgBox > img {
    width: 100%;
}

.art-ual-section05-con2-arrowText-title {
    margin-bottom: .5rem;
    font-size: 1.4rem;
    color: #000;
}

.art-ual-section05-con2-arrowText-text {
    color: #767676;
    font-size: 1rem;
    line-height: 1.4;
}

.art-ual-section05-con2-arrowText-text > span {
    border-bottom: 1px solid #767676;
}

.art-ual-section05 .art-ual-text {
    color: #000;
}

@media screen and (max-width:767px) {
    .art-ual-section05 .art-ual-section05-text {
        font-size: 2.6vw;
    }
    .art-ual-section05-con1 {
        grid-template-columns: repeat(2, 1fr);
    }
    .art-ual-section05-con1 > div:last-child {
        grid-column: 2 span;
    }
    .art-ual-section05-con1 > div:last-child .art-ual-section05-con1-col {
        width: 50%;
        margin: 0 auto;
    }

    .art-ual-section05-con2-title {
        display: block;
    }
    .art-ual-section05-con2-title > span {
        margin-bottom: 1rem;
    }
    .art-ual-section05-con2-table table th{
        width: 25%;
    }
    .art-ual-section05-con2-table table td{
        width: 75%;
    }
}

/*******************************************************************************
********************************************************************************
                                  컨설팅 신청
********************************************************************************
*******************************************************************************/
.art-ual-section06 .art-ual-text {
    margin-bottom: 1.6rem;
}

.art-ual-section06-link {
    width: 21rem;
    margin: 0 auto;
    padding: .8rem 0;
    font-size: 1.4rem;
    background: #FFB400;
    border-radius: .6rem;
    font-weight: 700;
}


/*******************************************************************************
********************************************************************************
                                  포트폴리오
********************************************************************************
*******************************************************************************/
.art-ual-section07 > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.art-ual-section07-imgBox {
    width: 20%;
    margin-right: 5%;
}

.art-ual-section07-imgBox > img {
    width: 100%;
}

.art-ual-section07-textBox {
    width: 60%;
    text-align: left;
}

.art-ual-section07-title {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.art-ual-section07-title > strong {
    font-size: 3rem;
}

.art-ual-section07-title > strong > span {
    color: #69A82C;
}

.art-ual-section07-text {
    font-size: 1.3rem;
    margin-bottom: 1.3rem;
    color: #999999;
}

.art-ual-section07-phone {
    display: flex;
    justify-content: space-between;
}

.art-ual-section07-phone > span {
    font-size: 1.5rem;
    color: #FFFFFF;
}

@media screen and (max-width: 1080px) {
    .art-ual-section07-phone{
        display: block;
    }
    .art-ual-section07-phone > span {
        display:block;
        margin-bottom: 1rem;
    }
}
@media screen and (max-width:767px) {
    .art-ual-section07 > div {
        display: block;
    }
    .art-ual-section07-textBox {
        text-align: center;
    }
    .art-ual-section07-imgBox {
        width: 30%;
        margin: 0 auto 1rem;
    }
    .art-ual-section07-textBox{
        width: 100%;
    }
}