@charset "utf-8";
@font-face{font-family:"LibreBaskerville";src:url(../font/LibreBaskerville-Regular.ttf);}
@font-face{font-family:"ChelseaMarket";src:url(../font/ChelseaMarket-Regular.ttf);}
button:active{transform:scale(1.05);}section{position:relative;width:100%;height:37.5rem;background-image:url("./img/bg.png");background-repeat:no-repeat;background-size:cover;}.main-container{position:absolute;left:13%;top:42%;transform:translate(-13%,-42%);}.main-container p{line-height:0;margin:0;}
.main-container p:nth-child(1){font-family:calibri;font-weight:bold;color:#6d6d6d;font-size:1.3rem;}.main-container h2{font-family:ChelseaMarket;font-weight:bold;color: #ADB0F3;font-size:3.7rem;}
.main-container h2 span{color:#E9545A;}.main-container p:nth-child(3){font-family:calibri;color:#403e3e;font-size:1.8rem;}.eunha{position:absolute;height:500px;bottom:40px;left:80%;transform:translateX(-80%);}
.horizontal-add{text-align:center;}
.hub-container{position:relative;width:80%;height:20.6rem;background-color:#fff;border-radius:1.2rem;box-shadow:2px 2px 12px rgba(0,0,0,0.2);display:flex;margin:-7% auto 1.2rem auto;justify-content:space-evenly;align-items:center;}
.hub-container img{height:15.6rem;}.hub-text{width: 34.3rem;}
.hub-text h1{color:#3e3d3d;font-family:LibreBaskerville;font-size:0.8rem;font-weight:bold;line-height:0.3rem;}
.hub-text p:nth-child(1){color:#403e3e;font-family:LibreBaskerville;font-weight:bold;font-size:1.4rem;line-height:0;}
.hub-text p:nth-child(3),.hub-text p:nth-child(4){color:#7e7d7d;font-family:calibri;font-size:1rem;}
.hub-text button{width:7.5rem;height:2.5rem;margin:0 0.6rem;font-family:calibri;font-size:0.8rem;font-weight:bold;border-radius:0.6rem;cursor:pointer;}
#explore{width:7rem;color:#373636;border:2px solid #373636;}
#browse{width:7rem;background-color:#0b0b0b;color:#fff;border:none;}
.add-space{box-sizing:border-box;width:85%;margin:0 auto;text-align:center;}
.work-container{height:37.5rem;background-color:#fff;padding:2% 10% 0 10%;}
.work-text{width:31.2rem;margin:3.1rem 0;}.work-text h3{font-family:calibri;font-weight:bold;color:#3e3d3d;font-size:1.8rem;line-height:0;}
.work-text p:nth-child(2){font-family:calibri;font-weight:bold;color:#3e3d3d;font-size:0.9rem;line-height:5px;}
.work-text p:nth-child(3){max-width:100%;font-family:calibri;color:#7e7d7d;}.work-content{display:flex;justify-content:space-between;}
.work-section{position: relative;width:18.7rem;height:20rem;background-repeat:no-repeat;background-size:cover;box-shadow:2px 2px 0.7rem rgba(0,0,0,0.3);display:flex;justify-content:center;align-items:center;top:0;transition:top ease 0.5s;overflow:hidden;}
.work-section-div{position:absolute;display:flex;justify-content:center;align-items:center;flex-direction:column;}
.work-section-number{width:2.5rem;height:2.5rem;border-radius:50%;background-color:#fff;display:flex;justify-content:center;align-items:center;font-family:calibri;font-weight:bold;}
.work-section-heading{color:#fff;font-family:calibri;font-size:1.4rem;line-height:0;}
.work-section-details{width:14.3rem;color:#f1f1f1;font-family:calibri;text-align: center;margin:0 0 1.2rem 0;}
.work-section-btn{padding:0.8rem 2.6rem;color:#000;background-color:#fff;font-size:0.9rem;font-weight:bold;font-family:calibri;border-radius:0.6rem;}
.website-container{height:auto;background-color:#d5d5d5;padding:2% 10% 5% 10%;}.website-text{max-width:100%;margin:3.1rem 0;}
.website-text h3{font-family:calibri;font-weight:bold;color:#3e3d3d;font-size:1.8rem;line-height:0;}
.website-text p{max-width:100%;font-family:calibri;color:#3e3d3d;}
.website-news-container{width:100%;display:flex;justify-content:space-between;}
.website-news{width:18.7rem;background-color:#fff;box-shadow:2px 2px 0.7rem rgba(0,0,0,0.3);}
.website-news:after{content:'';display:block;width:0;border-bottom:6px solid #e9545a;transition:width 0.3s;}
.website-news:hover:after{width:100%;}.website-newsimg{max-width: 100%;}
.website-news img{max-width:100%;border-bottom:1px solid #E6E9ED;}
.website-news p:nth-child(2){padding:0 1rem;color:#000;font-family:calibri;font-size:1.1rem;}
.website-news p:nth-child(3){padding:0 1rem;color:#7e7d7d;font-family:calibri;font-size:0.7rem;}
@media(min-width: 1201px) and (max-width: 1920px){
    
}
@media(min-width: 1025px) and (max-width: 1200px){
	*{box-sizing:border-box;}
	.eunha{height:31.2rem;left:90%;transform:translateX(-90%);}
	.main-container{top:46%;}
	.main-container button{margin:5px;}
	.hub-container{width:80%;}
	.hub-container img{height:15rem;}
	.hub-text{width:31.2rem;}
	.hub-text p:nth-child(1){font-size:1.4rem;}
	.hub-text p:nth-child(2){font-size:0.8rem;}
	.hub-text p:nth-child(3),
	.hub-text p:nth-child(4){font-size:1rem;}
	.work-container{height:auto;padding:2% 5% 5% 5%;}
	.work-content{justify-content:center;flex-wrap:wrap;}
	.work-section{flex-grow:1;margin:0.6rem;}
	.website-container{padding:2% 5% 5% 5%;}
	.website-news{width:18rem;margin:0.6rem;}
}
@media (min-width: 768px) and (max-width: 1024px){
	*{box-sizing:border-box;}
	.eunha{height:28.7rem;left:90%;transform:translateX(-90%);}
	.main-container{top:46%;}
	.highlight{border-bottom:2px solid#E9545A;}
	.hub-container{width: 85%;padding:0 1.2rem;}
	.hub-container img{height:14.3rem;margin-left:1.2rem;}
	.work-container{height:auto;padding:2% 5% 5% 5%;}
	.work-content{justify-content:center;flex-wrap:wrap;}
	.work-section{flex-grow:1;margin:0.6rem;}
	.website-container{padding:2% 5% 5% 5%;}
	.website-news{width:90%;margin:0.6rem;}
}
@media (min-width: 641px) and (max-width: 767px) and (orientation: landscape){
	section {height:28.1rem;background-color:#f7f7f7;background-image:url("img/bg-l.PNG");background-repeat:no-repeat;background-size:cover;}
	.eunha{height:22.5rem;bottom:0.6rem;left:90%;transform:translateX(-90%);}
	.main-container{width:80%;top:50%;left:45%;transform:translate(-50%,-45%);}
	.main-container p:nth-child(1){font-size:1.2rem;}
    .main-container h1{font-size:3.1rem;}
	.main-container p:nth-child(3){line-height:2.5rem;font-size:1.5rem;margin:0;padding:0;}
	.hub-container{top:0;flex-direction:column;width:90%;height:auto;padding:1.8rem 0;align-items:center;}
	.hub-text{width:90%;text-align:center;}
	.hub-text p:nth-child(2){font-size:0.8rem;}
	.work-container{height:auto;padding:2% 5% 2% 5%;}
	.work-text{width:100%;}
	.work-content{flex-direction:column;align-items:center;}
	.work-section{width:90%;margin: 5px 1.8rem 0.6rem 1.8rem;}
	.work-section img{transform:scale(1.2);}
	.work-section-btn{font-size:0.8rem;}
	.website-news-container{display:flex;flex-direction:column;}
	.website-news{width:100%;margin-bottom:8%;}
}
@media (min-width: 641px) and (max-width: 767px) and (orientation: portrait){
	.eunha{display:none;}
	section{height:28.1rem;background-color:#f7f7f7;background-image:url("img/bg-p.PNG");background-repeat:no-repeat;background-size:cover;}
	.main-container{width:80%;top:50%;left:45%;transform:translate(-50%,-45%);}
	.main-container p:nth-child(1){font-size:1.2rem;}
    .main-container h1{font-size:3.1rem;}
	.main-container p:nth-child(3){line-height:2.5rem;font-size:1.5rem;margin:0;padding:0;}
	.hub-container{top:0;flex-direction:column;width:90%;height: auto;padding:1.8rem 0;margin-top:-12%;align-items:center;}
	.hub-text{width:90%;text-align:center;}
	.hub-text p:nth-child(2){font-size:0.8rem;}
	.work-container{height:auto;padding:2% 5% 0 5%;}
	.work-text{width:100%;}
	.work-content{flex-direction:column;align-items:center;}
	.work-section{width:90%;margin:5px 1.8rem 1.2rem 1.8rem;}
	.work-section-btn{font-size:0.8rem;}
	.website-news-container{display:flex;flex-direction:column;}
	.website-news{width:100%;margin-bottom:8%;}
}
@media (min-width: 361px) and (max-width: 640px) {
	.eunha{display:none;}
	section{height:28.1rem;background-color:#f7f7f7;background-image:url("img/bg-p.PNG");background-repeat:no-repeat;background-size:cover;}
	.main-container{width:80%;top:50%;left:45%;transform:translate(-50%,-45%);}
	.main-container p:nth-child(1){font-size:1.2rem;}
    .main-container h1{font-size:3.1rem;}
	.main-container p:nth-child(3){line-height:2.5rem;font-size:1.5rem;margin:0;padding:0;}
	.hub-container{top:0;flex-direction:column;width:90%;height: auto;padding:1.8rem 0;margin-top:-12%;align-items:center;}
	.hub-text{width:90%;text-align:center;}
	.hub-text p:nth-child(2){font-size:0.8rem;}
	.work-container{height:auto;padding:2% 5% 0 5%;}
	.work-text{width:100%;}
	.work-content{flex-direction:column;align-items:center;}
	.work-section{width:90%;margin:5px 1.8rem 1.2rem 1.8rem;}
	.work-section-btn{font-size:0.8rem;}
	.website-news-container{display:flex;flex-direction:column;}
	.website-news{width:100%;margin-bottom:8%;}
}
@media (min-width: 300px) and (max-width: 360px) {
	.eunha{display:none;}
	section{height:28.1rem;background-color:#f7f7f7;background-image:url("img/bg-p.PNG");background-repeat:no-repeat;background-size:cover;}
	.main-container{width:80%;top:50%;left:45%;transform:translate(-50%,-45%);}
	.main-container p:nth-child(1){font-size:1.2rem;}
    .main-container h1{font-size:3.1rem;}
	.main-container p:nth-child(3){line-height:2.5rem;font-size:1.5rem;margin:0;padding:0;}
	.hub-container{top:0;flex-direction:column;width:90%;height: auto;padding:1.8rem 0;margin-top:-12%;align-items:center;}
	.hub-text{width:90%;text-align:center;}
	.hub-text p:nth-child(2){font-size:0.8rem;}
	#explore{width: 6rem;}
    #browse{width: 6rem;}
	.work-container{height:auto;padding:2% 5% 0 5%;}
	.work-text{width:100%;}
	.work-content{flex-direction:column;align-items:center;}
	.work-section{width:90%;margin:5px 1.8rem 1.2rem 1.8rem;}
	.work-section-btn{font-size:0.8rem;}
	.website-news-container{display:flex;flex-direction:column;}
	.website-news{width:100%;margin-bottom:8%;}
}
@media (min-width: 100px) and (max-width: 299px){
    .eunha{display:none;}
	section{height:28.1rem;background-color:#f7f7f7;background-image:url("img/bg-p.PNG");background-repeat:no-repeat;background-size:cover;}
	.main-container{width:80%;top:50%;left:45%;transform:translate(-50%,-45%);}
	.main-container p:nth-child(1){font-size:1.2rem;}
    .main-container h1{font-size:3.1rem;}
	.main-container p:nth-child(3){line-height:2.5rem;font-size:1.5rem;margin:0;padding:0;}
	.hub-container{top:0;flex-direction:column;width:90%;height: auto;padding:1.8rem 0;margin-top:-12%;align-items:center;}
	.hub-text{width:90%;text-align:center;}
	.hub-text p:nth-child(2){font-size:0.8rem;}
	#explore{width: 6rem;}
    #browse{width: 6rem;}
	.work-container{height:auto;padding:2% 5% 0 5%;}
	.work-text{width:100%;}
	.work-content{flex-direction:column;align-items:center;}
	.work-section{width:90%;height:18rem;margin:5px 1.8rem 1.2rem 1.8rem;}
	.work-section-btn{font-size:0.8rem;}
	.website-news-container{display:flex;flex-direction:column;}
	.website-news{width:100%;margin-bottom:8%;}
}