/* 모바일 기준 w440 */
html {scroll-behavior: smooth;} /* 스크롤 애니메이션 효과 */
body, html {background-color:#ffffff;}
 /* ### Firefox */
html {scrollbar-width: 10px;;scrollbar-color: #ffffff #910000;}
/* ### Opera */
html::-o-scrollbar {width: 10px;}
html::-o-scrollbar-thumb {background-color: #222; border-radius: 5px;}
/* ### Chrome, Safari, Edge 등 웹킷 기반 브라우저 */
html {
    ::-webkit-scrollbar {width: 10px;}
    ::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);}
    ::-webkit-scrollbar-thumb {background-color: #222; border-radius: 5px;}
}
body {
    background-color: #222;
}
#wrap {
    background-color: white;
/*     width: 440px; */ /* 디자인 기준 크기(아이폰 17프로맥스) */
    min-width: 320px; /* 최소 제한 너비(고정) */
    /* max-width: 440px; */ /* 최대 제한 너비(디자인에 따라 다름) */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
/*     overflow-x:hidden;
 */    height:100vh;
}
#wrap .info,
#wrap .project_wrap .project {
    max-width: 1400px;
    margin: 0 auto;
}
/* =============================1. intro */
#wrap .intro {
    height:100vh;
    background: linear-gradient(#fff 70%, #E5E5E5); /* 그라데이션 색상옆 공백 후 퍼센티지: 색상 위치 */
    display:flex; flex-flow: row nowrap;
    justify-content: center; align-items: center;
}
#wrap .intro h1 {}
#wrap .intro h1 span {
    display: block; text-align: center;
    font-size: 1.31rem; line-height: 1.4; font-weight: 300;
}
#wrap .intro h1 span:nth-child(1) {}
#wrap .intro h1 span:nth-child(2) {}
#wrap .intro h1 .name {
    margin-top: 20px;
}
/* =============================2. info */
#wrap .info {
    padding: 200px 0;
}
#wrap .info .profile {
    width: 200px;
    display: flex; flex-flow: column wrap;
    justify-content: center; align-items: center;
    text-align: center;
    margin: 0 auto;
}
#wrap .info .profile .photo {
    width: 100%; height: 205px;
    border-radius: 16px;
    background-color: #E5E5E5;
}
#wrap .info .profile .photo img { width: 100%;}
#wrap .info .profile .profile_me {
    display: flex; flex-flow: row wrap;
    justify-content: space-around;
    padding-top: 18px;
}
#wrap .info .profile .profile_me li {
    font-size: 0.88rem; font-weight:300; line-height: 1.4;
    text-align: center;
    margin: 0 0 3px;
    width: 100%;
}
#wrap .info .profile .profile_me li:nth-child(1) {text-align: right; width: 42%;}
#wrap .info .profile .profile_me li:nth-child(2) {text-align: left; width: 45%;}
#wrap .info .profile .profile_me li:nth-child(3) {}
#wrap .info .profile .profile_me li:nth-child(4) {}
#wrap .info .profile .profile_me li:nth-child(5) {margin: 0;}
#wrap .info .profile .profile_me li a {}
#wrap .info .profile h2 {
    font-size: 1.13rem; font-weight:600;
    padding-bottom: 15px;
    padding-top: 29px;
}
#wrap .info .profile .s_list {
    display: flex; flex-flow: row wrap; gap: 3px;
    justify-content:space-between; align-items: center;
    width: 159px;
}
#wrap .info .profile .s_list p {}
#wrap .info .profile .s_list p img {
    width: 100%;
}
#wrap .info .details {
    display: none;
    position: relative;
}
#wrap .info .details dl {}
#wrap .info .details dt {}
#wrap .info .details dd {}
/* =============================3. project */
#wrap .project_wrap {
    height: 100vh;
    text-align: center;
}
#wrap .project_wrap h1 {
    font-size: 1.06rem; font-weight: 600; padding: 50px 60px;
}
/* =============================공통 프로젝트 선택자 */
#wrap .project_wrap .project {}
#wrap .project_wrap .project .title_thum {}
#wrap .project_wrap .project .title_thum h2 {
    font-size: 1.06rem; font-weight:600; padding-bottom: 20px;
}
#wrap .project_wrap .project .title_thum .mockup_img {}
#wrap .project_wrap .project .title_thum .mockup_img img {width: 100%; padding: 0 15px;}
#wrap .project_wrap .project .details {}
#wrap .project_wrap .project .details .p_info {
    display: flex; flex-flow: column nowrap;
    align-items:flex-start;
    padding: 21px 43px 0;
}
#wrap .project_wrap .project .details .p_info li::before {
    background:rgb(0, 0, 0);
    content:''; display: block;
    width: 2px; height: 2px;
    border-radius: 50%;
    left:-10px; top:50%; transform: translateY(-50%); /* transform : 세부위치 조정 */
    position: absolute;
}
#wrap .project_wrap .project .p_info li:nth-child(2)::before {}
#wrap .project_wrap .project .p_info li:nth-child(3)::before {}
#wrap .project_wrap .project .p_info li:nth-child(4)::before {}
#wrap .project_wrap .project .p_info li {
    font-size: 0.75rem;  line-height: 1.8;
    position: relative;
}
#wrap .project_wrap .project .details .plan {
    font-size: 0.75rem;  line-height: 1.6;
    padding: 19px 15px 60px;
    text-align: left;
}
#wrap .project_wrap .project .details .link {
    margin-bottom: 10px;
    display: flex; flex-flow: row nowrap;
    justify-content: center; align-items: center;
}
#wrap .project_wrap .project .details .link a:hover {
    background-color: #910000;
}
#wrap .project_wrap .project .details .link p {}
#wrap .project_wrap .project .details .link p a {
    padding: 7px 20px;
    border-radius: 40px;
    color: #fff;
    transition: background-color 0.3s;
}
#wrap .project_wrap .project .details .link p .proposal,
#wrap .project_wrap .project .details .link p .prototype {
    font-size: 0.88rem; font-weight:700;
}
#wrap .project_wrap .project .details .link p .proposal {
    width: 100%; height: 34px;
    background-color: #FF8800;
    margin-right: 20px;
}
#wrap .project_wrap .project .details .link p .prototype {
    width: 100%; height: 34px;
    background-color: #000;
}
/* =============================keyfr */
/* =============================개별 프로젝트 선택자 */
#wrap .project_wrap .project1 {}
/* =============================그래픽디자인 프로젝트 */
#wrap .project_wrap .graphic_title {}
#wrap .project_wrap .graphic_title h1 {
    padding: 80px 0;
    padding-bottom: 3px;
}
#wrap .project_wrap .graphic_title p {
    text-align: center;
    font-size: 0.75rem; font-weight: 300;
    margin-bottom: 30px;
}
#wrap .project_wrap .graphic_wrap {
    padding: 0 15px 80px;
    overflow: hidden;
    width: calc(100% - 30px);
    margin: 0 auto;
}
#wrap .project_wrap .graphic_wrap .graphic_container {
    margin: 0 auto;
    display: flex; flex-flow: row nowrap;
    width: max-content;
    gap: 20px;
}
#wrap .project_wrap .graphic_wrap .graphic_container a {
    background-color:aquamarine;
    width: 123px; height: 200px;
    overflow: hidden;
}
#wrap .project_wrap .graphic_wrap .graphic_container a img {
    width: 100%;
}
/* =============================위 그래픽 이미지 클릭시 실행되는 팝업 */
#wrap .project_wrap .graphic_popup_bg {
    display: none; /* 팝업 감춘상태 ------------------------------------------- */
    position: fixed; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* display: flex; justify-content: center; align-items: center; */
}
#wrap .project_wrap .graphic_popup_bg .popup {
    width: 80%; height: 60vh; background: #fff;
    position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);
    /* overflow-x: hidden;  */overflow-y: auto; /* 이미지 팝업 스크롤 */
}
#wrap .project_wrap .graphic_popup_bg .popup img {
    width: 100%;
}