/******************************************************************************* ******************************************************************************** layout ******************************************************************************** *******************************************************************************/ .art-ual * { line-height: 1.2; } .art-ual { text-align: center; } .art-ual-section02 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/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/renewal/programs/details/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/renewal/programs/details/art-ual/art-ual-section06-bg01-220127.jpg") no-repeat center top; background-size: cover; } .art-ual-section07 { background: #000; } .art-ual-title { font-size: 60rem; color: #fff; margin-bottom: 60rem; font-weight: 700; } .art-ual-title > strong { color: #FFB400; } .art-ual-text { font-size: 34rem; color: #fff; font-weight: 400; } .art-ual-text span { color: #FFB400; } .art-ual-text-imgBox { display: inline-block; width: 300rem; margin-bottom: 20rem; } .art-ual-text-imgBox > img { width: 100%; } .art-ual > section, .art-ual > article {padding: 120rem 0;} /******************************************************************************* ******************************************************************************** 세계랭킹 2위 ******************************************************************************** *******************************************************************************/ .art-ual-section02{overflow: hidden;} .art-ual-section02-imgBox { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60rem; } .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: 246rem; margin-bottom: 20rem; } .art-ual-section02-imgBox > span:last-child > img:last-child { width: 400rem; } /******************************************************************************* ******************************************************************************** 영국 6개 예술 대학교 연합 ******************************************************************************** *******************************************************************************/ .art-ual-section03 .art-ual-title { color: #000; } .art-ual-section03-con { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 18rem; row-gap: 30rem; } .art-ual-section03-con-col { width: 100%; } .art-ual-section03-con-imbBox { width: 100%; margin-bottom: 20rem; } .art-ual-section03-con-imbBox > img { width: 100%; } .art-ual-section03-con-title { text-align: left; font-size: 28rem; margin-bottom: 10rem; } .art-ual-section03-con-text { text-align: left; color: #767676; font-size: 18rem; } /******************************************************************************* ******************************************************************************** 두가지 루트 ******************************************************************************** *******************************************************************************/ .art-ual-section04-table { margin-bottom: 66rem; } .art-ual-section04-table table { width: 100%; background: #F3F3F3; margin-bottom: 15rem; border-radius: 8rem; isolation: isolate; overflow: hidden; } .art-ual-section04-table th { text-align: center; font-size: 20rem; font-weight: 400; padding: 12rem 0; color: #191919; } .art-ual-section04-table thead{background-color: transparent;} .art-ual-section04-table thead th { position: relative; background-color: transparent;} .art-ual-section04-table tbody th { width: 10%; } .art-ual-section04-table table th, .art-ual-section04-table table td{border: 2rem solid #F3F3F3;} .art-ual-section04-table th > strong { font-size: 28rem; } .art-ual-section04-table th > strong > span { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); z-index: 1;} .art-ual-section04-table th > strong > strong { background: #FECE06; display: inline-block; padding: 0 4rem; font-weight: 800;} .art-ual-section04-table td { width: 45%; color: #767676; padding: 16rem 0; background: #fff; font-size: 18rem; } .art-ual-section04-table tbody > tr:first-child > td:nth-child(2) { border-radius: 8rem 0 0 0; isolation: isolate; } .art-ual-section04-table tbody > tr:first-child > td:nth-child(3) { border-radius: 0 8rem 0 0; isolation: isolate; } .art-ual-section04-table tbody > tr:last-child > td:nth-child(2) { border-radius: 0 0 0 8rem; isolation: isolate; } .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: 4rem; } .art-ual-section04-table td span { color: #C20000; } .art-ual-section04-table-text { font-weight: 300; font-size: 18rem; text-align: left; color: #fff; } .art-ual-section04-table-text > span { font-weight: 500; text-align: left; display: inline-block; margin-bottom: 10rem; } /******************************************************************************* ******************************************************************************** 파운데이션 과정 소개 ******************************************************************************** *******************************************************************************/ .art-ual-section05 .art-ual-title { color: #000; margin-bottom: 20rem; } .art-ual-section05 .art-ual-section05-text { font-size: 28rem; margin-bottom: 60rem; } .art-ual-section05 .art-ual-section05-text > span { color: #C20000; } .art-ual-section05-con1 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20rem; row-gap: 20rem; margin-bottom: 60rem; } .art-ual-section05-con1-col { width: 100%; } .art-ual-section05-con-col1-imBox { width: 100%; margin-bottom: 25rem; height: 216rem; border-radius: 8rem; isolation: isolate; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 10rem 8rem 20rem #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: 8rem; max-width: 208rem;} .art-ual-section05-con-col1-imBox > span > span { color: #767676; font-size: 18rem; } .art-ual-section05-con1-col-text { font-size: 20rem; color: #191919; } .art-ual-section05-con1-col-text > span { display: inline-block; width: 20rem; height: 20rem; font-size: 20rem; background: #000; color: #fff; line-height: 20rem; } .art-ual-section05-con2 { margin-bottom: 120rem; } .art-ual-section05-con2-spanFlex { display: flex; justify-content: center; margin-bottom: 10rem; } .art-ual-section05-con2-spanFlex > span { display: inline-block; padding: 8rem 14rem; background: #C20000; color: #fff; border-radius: 8rem; isolation: isolate; margin: 0 5rem; font-size: 20rem; font-weight: 700; } .art-ual-section05-con2-spanFlex > span:first-child { background: #FFB400; } .art-ual-section05-con2-title { font-size: 34rem; display: flex; align-items: center; justify-content: center; margin-bottom: 50rem; } .art-ual-section05-con2-title > span { display: inline-block; width: 34rem; height: 34rem; font-size: 22rem; line-height: 34rem; border-radius: 50%; isolation: isolate; margin-right: 10rem; background: #000; color: #fff; } .art-ual-section05-con2-table table { border-radius: 8rem; isolation: isolate; background: #F6F5F5; box-shadow: 10rem 10rem 20rem #00000030; width: 100%; overflow: hidden; } .art-ual-section05-con2-table table th { width: 20%; font-size: 20rem; font-weight: 700;} .art-ual-section05-con2-table table td { text-align: left; width: 80%; padding: 18rem; color: #767676; font-size: 18rem; line-height: 1.4; background: #fff; } .art-ual-section05-con2-table table th, .art-ual-section05-con2-table table td{border: 2rem solid #F3F3F3;} .art-ual-section05-con2-table table tr:first-child td:nth-child(2) { border-radius: 8rem 0 0 0; isolation: isolate; } .art-ual-section05-con2-table table tr:last-child td:nth-child(2) { border-radius: 0 0 0 8rem; isolation: isolate; } .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: 185rem; margin: 0 auto 22rem; } .art-ual-section05-con2-arrowText-imgBox > img { width: 100%; } .art-ual-section05-con2-arrowText-title { margin-bottom: 10rem; font-size: 28rem; color: #000; } .art-ual-section05-con2-arrowText-text { color: #767676; font-size: 20rem; line-height: 1.4; } .art-ual-section05-con2-arrowText-text > span { border-bottom: 1px solid #767676; } .art-ual-section05 .art-ual-text { color: #000; } /******************************************************************************* ******************************************************************************** 컨설팅 신청 ******************************************************************************** *******************************************************************************/ .art-ual-section06 .art-ual-text { margin-bottom: 32rem; } .art-ual-section06-link { max-width: 420rem; margin: 0 auto; padding: 16rem 0; font-size: 28rem; background: #FFB400; border-radius: 12rem; isolation: isolate; font-weight: 700; width: 100%;} /******************************************************************************* ******************************************************************************** 포트폴리오 ******************************************************************************** *******************************************************************************/ .art-ual-section07 > div { display: flex; justify-content: center; align-items: center; } .art-ual-section07-imgBox { width: 400rem; margin-right: 5%; } .art-ual-section07-imgBox > img { width: 100%; } .art-ual-section07-textBox { width: 1200rem; text-align: left; } .art-ual-section07-title { color: #fff; font-size: 40rem; font-weight: 500; margin-bottom: 24rem; } .art-ual-section07-title > strong { font-size: 60rem; } .art-ual-section07-title > strong > span { color: #69A82C; } .art-ual-section07-text { font-size: 26rem; margin-bottom: 26rem; color: #999999; } .art-ual-section07-phone { display: flex; justify-content: space-between; } .art-ual-section07-phone > span { font-size: 30rem; color: #FFFFFF; } @media screen and (max-width: 991px) { .art-ual-title{font-size: 25rem; letter-spacing: -0.5rem; line-height: 130%; margin-bottom: 48rem;} .art-ual-text{font-size: 16rem; letter-spacing: -0.16rem; line-height: 150%;} .art-ual > section, .art-ual > article {padding: 78rem 0;} .art-ual-section02-imgBox{margin-bottom: 48rem;} .art-ual-section02-imgBox > span:first-child{margin-bottom: 26rem;} .art-ual-section02-imgBox > span > img{object-fit: contain;} .art-ual-section02-imgBox > span:last-child > img:first-child {width: 55%; } .art-ual-section02-imgBox > span:last-child > img:last-child {width: 89%; } .art-ual-section03-con { grid-template-columns: repeat(2, 1fr); column-gap: 12rem; row-gap: 20rem;} .art-ual-section03-con-title{font-size: 18rem; margin-bottom: 8rem;} .art-ual-section03-con-text{font-size: 14rem;} .art-ual-section03-con-imbBox{margin-bottom: 13rem;} .art-ual-section04-table{margin-bottom: 43rem;} .art-ual-section04-table table{margin-bottom: 0; min-width: 482rem;} .art-ual-section04-table .tableWrap::after{z-index: 1; background: linear-gradient(-90deg, #212433, transparent);} .art-ual-section04-table th { font-size: 14rem; letter-spacing: -0.14rem; line-height: 150%; padding: 10rem 0;} .art-ual-section04-table th > strong { font-size: 16rem; letter-spacing: -0.16rem; line-height: 150%; } .art-ual-section04-table td { font-size: 14rem; letter-spacing: -0.14rem; line-height: 150%; padding: 13rem 0;} .art-ual-section04-table-text { font-size: 12rem; letter-spacing: -0.12rem; line-height: 150%; margin-bottom: 8rem; margin-top: 12rem;} .art-ual-section05 .art-ual-section05-text{font-size: 16rem; margin-bottom: 48rem;} .art-ual-section05-con-col1-imBox{margin-bottom: 20rem; height: 173rem;} .art-ual-section05-con-col1-imBox > span{max-width: 137rem;} .art-ual-section05-con-col1-imBox > span > span{font-size: 14rem;} .art-ual-section05-con-col1-imBox > span > img{margin-bottom: 6rem;} .art-ual-section05-con1{margin-bottom: 48rem; gap: 13rem;} .art-ual-section05-con1-col-text{font-size: 14rem;} .art-ual-section05-con1-col-text > span{font-size: inherit; width: 16rem; height: 16rem; line-height: 16rem;} .art-ual-section05-con2{margin-bottom: 78rem;} .art-ual-section05-con2-spanFlex{margin-bottom: 10rem;} .art-ual-section05-con2-spanFlex > span{font-size: 13rem; padding: 5rem 9rem; margin: 0 3rem; border-radius: 5rem; isolation: isolate;} .art-ual-section05-con2-title { display: block; font-size: 18rem; margin-bottom: 32.5rem;} .art-ual-section05-con2-title > span {font-size: 14rem; margin-right: 8rem; width: 22rem; height: 22rem; line-height: 22rem; display: block; margin: 0 auto 13rem;} .art-ual-section05-con2-table table th { width: 24%; font-size: 14rem; line-height: 150%; letter-spacing: -0.14rem; padding: 0 4rem;} .art-ual-section05-con2-table table td { width: 76%; font-size: 14rem; padding: 12rem; line-height: 150%; letter-spacing: -0.14rem;} .art-ual-section05-con2-arrowText-imgBox{width: 120rem;} .art-ual-section05-con2-arrowText-title{font-size: 16rem; letter-spacing: -0.16rem; line-height: 150%; margin-bottom: 6.5rem;} .art-ual-section05-con2-arrowText-text{font-size: 13rem; letter-spacing: -0.13rem; line-height: 150%;} .art-ual-text-imgBox{width: 195rem; margin-bottom: 13rem;} .art-ual-section06-link{font-size: 18rem; letter-spacing: -0.18rem; height: 42rem; line-height: 42rem; padding: 0; border-radius: 8rem; isolation: isolate;} } @media screen and (max-width: 575px) { .art-ual-section02-imgBox{display: block;} .art-ual-section02-imgBox > span{width: 100%; max-width: 100%; display: flex; justify-content: center; } .art-ual-section02-imgBox > span:last-child > img:first-child { max-width: 197rem; width: 32%; flex-shrink: 0;} .art-ual-section02-imgBox > span:last-child > img:last-child { max-width: 320rem; width: 51%; flex-shrink: 0;} .art-ual-section03-con { grid-template-columns: repeat(1, 1fr);} .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; white-space: nowrap;} .art-ual-section05-con-col1-imBox{height: 140rem;} }