@charset "utf-8";
/* 커서 커스터마이징 */
body{cursor:cell;}
/* 공통 */
.inner{width:100%;box-sizing: border-box;padding-left:6vw;padding-right: 6vw;}
.inner2{width:100%;box-sizing: border-box;padding-left:2.5vw;padding-right: 2.5vw;}
.inner3{width:160rem;box-sizing:border-box;margin-left:auto;margin-right:auto}

/* 공통 */
body{overflow-x: hidden;}
main#main {min-height: 1080px;}
/* header */
#header.on{position: fixed;z-index: 1000;width: 100%;}
#header.on::after{position: absolute;top:0;left:0;display: block;content: "";width: 100%;height:100%;background: rgba(255,255,255,0.5);z-index: -1;backdrop-filter: blur(5px);}
header .inner2{display: flex;flex-wrap: wrap;justify-content: space-between;padding-top: 3rem;padding-bottom: 3rem;}
.gnb ul{display:flex;flex-wrap: wrap;gap: 3vw;font-family: "Montserrat", serif;}
.gnb .pc_menu li a{transition:0.3s}
.gnb .pc_menu li:hover a{color:orangered;font-weight:bold;transition:0.3s}
.mo_gnb{display: none;}
/* header */

/* mainvisual */
.mainVisual{margin: 0 auto;padding: 0;width: calc(100% - 5vw);height:auto;aspect-ratio: 1820/780;background: #FBFFEF;position: relative;border-radius: 5rem;}
main.scroll_on{padding-top:10rem}
.mvTit {position: absolute;display: flex;flex-wrap: wrap;flex-direction: column;height: 80%;justify-content: space-between;width: 90%;top: 50%;left: 50%;transform: translate(-50%, -50%);box-sizing:border-box}
.mvTit h2{font-size: 6vw;font-weight: 900;position: relative;font-family: "Montserrat", serif;letter-spacing: -2px;color:#451605}
.mvTit h2 i{position: absolute;top:-4.5vw;width:2.5vw;height:auto;aspect-ratio: 1/1;display: inline-block}
.mvTit h2 i img{width:100%;height:auto;}
.mvTit h2.fist_tit p{font-size:2rem;font-weight:300;position:absolute;right:0;top:0;width: fit-content;}
.mvTit h2.fist_tit p:last-child{font-size:2rem;font-weight:300;position:absolute;left:0;top: 10vw;width: fit-content;}
.mvTit h2 p:before{content:"";display:block;width:3vw;height:1px;background:#451605}
.mvTit h2.middle_tit{margin-left:auto;color:#FBFFEF;text-shadow: -1px -1px 0 #451605, 1px -1px 0 #451605, -1px 1px 0 #451605, 1px 1px 0 #451605;}
.mvTit h2.fist_tit::after{content: "Let's";color:transparent;;position: absolute;top:0;left:7px;-webkit-text-stroke: 1px #451605;}
.mvTit h2.middle_tit::after{content: attr(data-content);color:transparent;;position: absolute;top:0;left:7px;-webkit-text-stroke: 1px #451605;z-index:-1;}
.mvTit h2.last_tit::after{content: "Blocks";color:transparent;;position: absolute;top:0;left:7px;-webkit-text-stroke: 1px #451605;}
.mo_ex_txt{display:none}
.object_wrap {display: flex;flex-wrap: wrap;flex-direction:column;height: 100%;;row-gap:1rem;width: max-content;margin: 0 auto;justify-content: center;align-items: center;}
.object_wrap .block002, .object_wrap .block004, .object_wrap .block005{display:flex;flex-wrap:wrap;column-gap: 1rem;}

.object_wrap > div figure{animation: up-down 1.4s infinite ease-in-out alternate}

@keyframes left-down{
  from{
    transform: translateX(-2rem);
  }
  to{
    transform: translateX(0);
  }
}
@keyframes right-down{
  from{
    transform: translateX(2rem);
  }
  to{
    transform: translateX(0rem);
  }
}
@keyframes up-down{
  from{
    transform: translatey(-2rem);
  }
  to{
    transform: translatey(2rem);
  }
}
.object_wrap div figure img{width:100%;height:auto}
/* mainvisual */

/* 공통 메인 */
.cont{padding-top: 15rem;}
.cont .tit{margin-bottom: 5rem;}
.cont .tit h2{font-size: 6rem;font-weight: 700;}
/* 공통 메인 */

/* cont01 */
.profile.grid{grid-template-columns: 1fr 1fr 1fr;gap:1vw;position: relative;}
.profile::before{content: "";position: absolute;right: 0;bottom: 0;width: 7rem;height: auto;aspect-ratio: 1/1;background: url(../media/img/obj.png)no-repeat center center/contain;}
.profile .detail{display: flex;flex-wrap: wrap;flex-direction: column;justify-content: space-between;row-gap: 4rem}
.profile .detail h3{font-size: 2.5rem;color: orangered;font-weight: 600;margin-bottom: 1em}
.profile .detail figure{width:90%;position: relative;}
.profile .detail figure i{position: absolute;left:1.5rem;bottom: -3rem;width:7rem;height:auto;aspect-ratio: 1/1;}
.profile .detail figure i img{width: 100%;height: auto;}
.profile .detail figure picture{width:inherit;height: auto;aspect-ratio: 3/2;background: #eee;display: block;overflow: hidden;border-radius: 1em;}
.profile .detail figure picture img{width:100%;height:100%;object-fit: cover;}
.profile .detail .detail_li{display:grid;grid-template-columns: 1fr 1fr;row-gap: 1rem;}
.profile .detail .detail_li p b{font-weight:700;}
.dep_detail dl{display: grid;grid-template-columns: 1fr 1fr;row-gap:1em}
.dep_detail dl dt{font-weight: 800;color:#666}
.dep_detail dl ul{display: flex;flex-wrap: wrap;flex-direction: column;row-gap: 0.5em;}
.detail_desc .about_me_txt{word-break: keep-all;margin-top:1em}
/* cont01 */

/* cont02 */
.cont02 .tit{display: flex;flex-wrap: wrap;justify-content: space-between;}
.cont02 .tit a{font-size: 2.4rem;display: flex;flex-wrap: wrap;gap: 2rem;transition: 0.3s ease-in;}
.cont02 .tit a:hover{gap: 0;transition: 0.3s ease-in;color:#F24D01}
.cont02 .tit a:hover i{color:#F24D01}
.photo_btn{width:100%}
.photo_btn button {width: 7rem;height: auto;aspect-ratio: 1 / 1;font-size: 2rem;font-weight: 700;border-radius: 1em;border: none;transition:0.3s}
.photo_btn button:hover{background:#F24D01;color:#fff;transition:0.3s}
.webpofol ul .slick-list{margin: 0 -2vw;}
.webpofol ul .slick-slide{margin: 0 2vw;}
.webpofol ul div div li{overflow: hidden;height: 25vw;aspect-ratio: 427/645;max-height: 64rem;-webkit-mask-image:radial-gradient(circle 15rem at 0 0, transparent 0, transparent 4vw, black 3vw);border-radius:0 2em 2em 2em;}

.webpofol ul li a{position: relative;overflow: hidden;width:100%;height:100%;display: flex;flex-wrap: wrap;flex-direction: column;align-items: end;justify-content: start;box-sizing:border-box;padding-top: 2em;padding-right: 2em;}
.webpofol ul li a img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;scale: 1;transition: 0.5s ease-in-out}
.webpofol ul li a p{font-size: 1.3em;font-weight: 600;transition: 0.5s ease-in-out;position: relative;z-index: 1;display: none;}
.webpofol ul li:hover a img{scale: 1.2;transition: 0.5s ease-in-out;}
.webpofol ul li:hover a p{font-size: 2em;transition: 0.5s ease-in-out;position: relative;color: #fff;display: block;}
.webpofol ul li:hover a::after{position: absolute;display: block;content: "";left: 0;top: 0;width: 100%;height: 30%;background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));z-index: 0;}
.photo_btn{margin-top: 1.5em;}
.photo_btn button{cursor: pointer;}
/* cont02 */

/* cont03 */
.cont.cont03{padding-bottom:15rem;}
.cont03 .tit{display: flex;flex-wrap: wrap;justify-content: space-between;}
.cont03 .tit h2{width: max-content;}
.cont03 .tit a{font-size: 2.4rem;display: flex;flex-wrap: wrap;gap: 2rem;transition: 0.3s ease-in;}
.cont03 .tit a:hover{gap: 0;transition: 0.3s ease-in;color:#F24D01}
.cont03 .tit a:hover i{color:#F24D01}
.visualart ul{display: flex;flex-wrap: wrap;flex-direction: column;row-gap: 2rem;}
.visualart ul li{border-radius: 1em;box-sizing: border-box;overflow:hidden;/* background:orangered */background:#FBFFEF}
.visualart ul li:hover{box-sizing: border-box;background:none}
.visualart ul li a{padding: 2rem 9rem;transition: 0.5s ease-in;box-sizing: border-box;width:100%;height: 100%;display: flex;flex-wrap: wrap;gap: 2rem;align-items: center;word-break: keep-all;}
.visualart ul li a h3{font-size: 2em;font-weight: 600;}
.visualart ul li a p{font-size: 1.2em;}
.visualart ul li:hover a{padding:9rem;transition: 0.5s ease-out;}
.visualart ul li:hover a h3{color: #fff;}
.visualart ul li:hover a p{color: #fafafa;}
.visualart ul li picture.visual_pic_img{width:100%;height:100%;position:absolute;top:0;lefT:0;z-index:-1}
.visualart ul li picture.visual_pic_img img{width:100%;height:100%;object-fit:cover!important;}
.visualart ul li picture.visual_pic_img{display:none;}
/* .visualart ul li:hover picture.visual_pic_img{display:block;} */
.visualart ul li:nth-child(1):hover{background: rgb(255, 0, 128);}
.visualart ul li:nth-child(2):hover{background: #e0b769;}
.visualart ul li:nth-child(3):hover{background: #198deb;}
/* cont03 */

/* footer */
footer{background:#f5f5f5}
footer .inner2{display: flex;flex-wrap: wrap;justify-content: space-between;padding-top: 5rem;padding-bottom: 5rem;}
/* footer */



/* sub 디테일 */
#bo_v_img > a:first-child{display: none;}
/* sub 디테일 */



@media (prefers-color-scheme: dark) {

	/* 메인비주얼 배경 조정 */
	.mvTit h2.fist_tit::after, .mvTit h2.last_tit::after{color:#fbfbfb}
	.mvTit h2 p:before{background:#f7f7f7;}
	.mainVisual{background:#868784;}

	.photo_btn button{background:#666}

	.visualart ul li a h3, .visualart ul li a p{color:var(--333)}

	/* footer */
	footer{background:none;border-top:1px solid #f6f6f6;}
} 


/* 반응형 */
@media (max-width:1800px){
	.mainVisual{aspect-ratio:unset}
	.object_wrap{padding:2vw 0}
}
@media (max-width: 1660px) {
	.inner3{width:140rem}
}
@media (max-width: 1440px) {
	.inner3{width:100%;box-sizing:border-box;padding-left:2.5vw;padding-right: 2.5vw;}
	.cont .tit h2{font-size: 2.3em;}
	.cont{padding-top:10rem}
	.cont.cont03{padding-bottom:10rem}
}

@media (max-width:1400px){
	.mainVisual{display:flex;flex-wrap:wrap;justify-content: space-between;height:100%;align-items:center;padding:0 2vw}
	.mvTit{width:45%;transform: translate(0, 0);position: static;row-gap: 3vw;display:flex;flex-wrap:wrap;}
	.object_wrap{margin: 0;height: 50%}
	.object_wrap figure{height:100%}
}
@media (max-width:1320px){
    .mainVisual{padding: 2.5vw 2vw}
	.object_wrap{width:48%}
	.object_wrap div figure{height:5em;overflow:hidden;}
	.object_wrap .block001 figure, .object_wrap .block003 figure{width:100%;}
	.object_wrap .block002 figure, .object_wrap .block004 figure{width:calc(100% / 2 - 1rem)!important;border-radius:1rem}
	.object_wrap .block005 figure{width:calc(100% / 3 - 1rem)!important;border-radius:1rem}
	.object_wrap div figure img{height:100%;object-fit:cover}
	

}

@media (max-width: 1200px) {
  header{position: fixed;z-index: 1000;width: 100%;}
  header::after{position: absolute;top:0;left:0;display: block;content: "";width: 100%;height:100%;background: rgba(255,255,255,0.5);z-index: -1;backdrop-filter: blur(5px);}
  header .inner2{padding-top: 2rem;padding-bottom: 2rem;align-items: center}
  .gnb{display: none;}
  .mo_gnb{display: block;}
  .mo_gnb > button{display: flex;aspect-ratio: 1/1;flex-wrap: wrap;flex-direction: column;justify-content: space-between;cursor: pointer;}
  .mo_gnb > button span{width:3rem;height: 0.2rem;background: var(--444);display: block;}
  .mo_gnb > ul li:first-child{margin-left: auto;}
  .mo_gnb > ul li:nth-child(2){margin-top: 2rem;}
  .mo_gnb > ul{display: flex!important;flex-wrap: wrap;position: fixed;width: 100%;box-sizing: border-box;padding: 1em;flex-direction: column;left: 0;top: 0;height: 100%;background: rgba(255,255,255,0.5);backdrop-filter: blur(1rem);}
  .mo_gnb > ul li button{display: flex;flex-wrap: wrap;flex-direction: column;aspect-ratio: 1/1;cursor: pointer;position: relative;justify-content: center;align-items: center}
  .mo_gnb > ul li button span{width:3rem;height: 0.2rem;background: var(--444);display: block;}
  .mo_gnb > ul li button span:first-child{rotate: 45deg;}
  .mo_gnb > ul li button span:last-child{rotate: -45deg;position: absolute;}
  .mo_gnb > ul li a{padding: 2rem 0;padding: 2rem 0;display: block;border-bottom: 1px solid;transition: 0.3s ease-in;}
  .mo_gnb > ul li a.act, .mo_gnb > ul li a:hover, .mo_gnb > ul li a:checked, .mo_gnb > ul li a:active{border-bottom: 1px solid orangered;font-size: 2em;color: orangered;font-weight: bold;transition: 0.3s ease-in;}
  main{padding-top:10rem}
  .mainVisual.scroll_on{padding-top:0}
  /* .mvTit{padding: 6rem; }*/
  .webpofol ul div div li{height:40vw}
  .profile.grid{grid-template-columns: 1fr auto;row-gap: 4em;column-gap: 1em;}
}

@media (max-width:1080px){
	.mvTit{width:max-content;}
	.mvTit h2.fist_tit p{display:none;}
	.mo_ex_txt{display:flex;flex-wrap:wrap;font-size:2rem;font-weight:300;position:absolute;right:0;width: fit-content;}
	.mvTit h2.middle_tit{margin-left:0}
	.object_wrap{width:auto}
	.object_wrap div figure{height:6em}
}

@media (max-width: 1024px){
  .mainVisual{/* aspect-ratio: 5/3; */border-radius:3vw}
  .mvTit{padding: 3vw;}
  .webpofol ul div div li{height:73vw}  
  .profile.grid{grid-template-columns: 1fr;column-gap: 0;column-gap: 2em;}
}
@media (max-width: 768px){
  header .inner2{padding-top: 1.5rem;padding-bottom: 1.5rem;}
  .profile .detail figure i{width:7vw}
  .profile::before{width: 7vw;}
  .visualart ul li a{padding: 2rem;}
  .visualart ul li:hover a{padding:5rem;}
}
@media (max-width: 650px){
  header .inner2{padding-top: 1rem;padding-bottom: 1rem;}
  .mainVisual{justify-content:center}
  .mvTit{flex-direction:row;width:100%;column-gap:2em;row-gap:1rem;justify-content:inherit}
  .object_wrap{width:100%;}
  .mo_ex_txt{display:none;}
  .mvTit::after{display:block;content:"#Web Publisher #Web designer #UIUX #UI designer #Digital design #Web portfolio";}
}
@media (max-width: 550px){
  .mvTit{background: transparent;width: 100%;padding: 1rem;box-sizing: border-box;}
  .mvTit h2{font-size: 6vw;}
  .profile::before{display: none}
}
@media (max-width: 450px){
	.mvTit h2{font-size: 3em;}
}
/* 반응형 */