/* index.css */
body {min-width:1920px; max-width:1920px; margin:0 auto;}
/* ---------------------------header */
header {
    position:fixed; right:0; top:0;
    z-index:900; min-width:1920px; height:70px;
    padding:30px 250px;
}
header nav {display:flex; gap:32px; position:absolute; right:249px;}
header nav a {font-weight:300; color:#DAE5E2;}
header nav a:hover {font-weight:400;}
/* ---------------------------home */
#wrap {height:100vh;}
#wrap #home {background-color:#2F5031; position:relative;}
#wrap #home #portfolio {background-color:#2F5031; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:right;}
#wrap #home h1 {
    font-family:'Lexend',sans-serif; font-size:10.125rem; font-weight:900; color:#DAE5E2;
}
#wrap #home h1 img {
    width:87px; height:auto; position:absolute; right:23px; bottom:36px;
    animation:ani 2s linear 1.5s both;
}
#wrap #home .ani {
    font-family:'Lexend',sans-serif; font-size:10.125rem; font-weight:900; color:#DAE5E2;
    position:absolute; left:0; bottom:0; z-index:-1;
    text-shadow:-1px 0px #DAE5E2, 0px 1px #DAE5E2, 1px 0px #DAE5E2, 0px -1px #DAE5E2;
    color:#2F5031; animation:h1_ani 2s linear 1.5s both; 
}
#wrap #home .name {
    font-size:2rem; font-weight:900; color:#DAE5E2; text-align:right; width:596px;
    position:relative; top:320px; left:0;
}
#wrap #home .name::after {
    content:''; width:100%; height:1px; background-color:#DAE5E2; display:block; position:relative; top:10px;
    transform-origin:left center; animation:line_ani 2s linear both;
}
#wrap #home .year {
    font-family:'Lexend',sans-serif; font-size:2rem; font-weight:700; color:#DAE5E2;
    width:522px; position:absolute; right:0; bottom:310px;
}
#wrap #home .year::after {
    content:''; width:100%; height:1px; background-color:#DAE5E2; display:block; position:relative; top:10px;
    transform-origin:right center; animation:line_ani 2s linear both;
}
#wrap #home #portfolio .job{}
#wrap #home #portfolio .job p {color:#DAE5E2; border:1px solid #DAE5E2; border-radius:18px; display:inline-block; padding:10px 15px; margin-left:14px;}
/* ---------------------------about me */
#wrap #about_me {
    background-color:#2F5031; padding:250px 250px 80px;
    display:flex; justify-content:space-between;
}
#wrap #about_me h2 {color:#DAE5E2; width:391px; line-height:130%;}
#wrap #about_me h2::after {background-color:#DAE5E2;}
#wrap #about_me .about_me_left {
    display:flex; flex-flow:column nowrap; justify-content:space-between; position:relative;
}
#wrap #about_me .about_me_left p {font-size:2.438rem; color:#DAE5E2;}
#wrap #about_me .about_me_left p em {font-weight:700; color:#DAE5E2;}
#wrap #about_me .about_me_left img {
    width:86px; position:absolute; left:-80px; top:23px;}
#wrap #about_me .about_me_left p em::after {
    content:'';height:1px; display:inline-block; width:340px; background-color:#DAE5E2;
    position:absolute; left: -60px; top:80px;
}
#wrap #about_me .about_me_left .profile {}
#wrap #about_me .about_me_left .profile .name {}
#wrap #about_me .about_me_left .profile .name em {font-size:1.375rem; font-weight:600; color:#fff; margin-right:10px;}
#wrap #about_me .about_me_left .profile .name span {font-weight:100; color:#fff;}
#wrap #about_me .about_me_left .profile p {font-weight:100; font-size:1rem; margin:15px 0;}
#wrap #about_me .about_me_left .profile dl {
    display:flex; flex-flow:row wrap; width:270px; justify-content:space-between; gap:17px; margin-top:30px;}
#wrap #about_me .about_me_left .profile dl dt {font-size:1.125rem; font-weight:500; color:#fff;}
#wrap #about_me .about_me_left .profile dl dd {font-weight:300;color:#fff; width:196px;}
#wrap #about_me .about_me_left .profile dl dd a {font-weight:300;color:#fff;}
#wrap #about_me .about_me_left .education {}
#wrap #about_me .about_me_left .education dl {
    display:flex; width:690px; flex-flow:row wrap; justify-content:space-between;}
#wrap #about_me .about_me_left .education dl dt {
    color:#fff;width:470px; font-size:1.125rem; margin-bottom:24px;}
#wrap #about_me .about_me_left .education dl dd {color:rgba(255,255,255,0.5);width:140px;}
#wrap #about_me .about_me_right {
    display:flex; flex-flow:column nowrap; justify-content:space-between;
}
#wrap #about_me .about_me_right .skill {}
#wrap #about_me .about_me_right .skill dl {
    display:flex; width:520px; flex-flow:row wrap; justify-content:space-between;
}
#wrap #about_me .about_me_right .skill dl dt {
    color:#fff; width:96px; font-size:1.125rem; margin-bottom:13px;}
#wrap #about_me .about_me_right .skill dl dd {color:#fff; width:375px; font-weight:300;}
#wrap #about_me .about_me_right .license {}
#wrap #about_me .about_me_right .license dl {
    display:flex; width:320px; flex-flow:row wrap; justify-content:space-between;
}
#wrap #about_me .about_me_right .license dl dt {
    color:#fff; width:140px; font-size:1.125rem; margin-bottom:12px;
}
#wrap #about_me .about_me_right .license dl dd {color:rgba(255,255,255,0.5);width:140px;}
#wrap #about_me h3 {
    font-size:1.75rem; color:#DAE5E2; font-weight:600; font-family:'Lexend',sans-serif;
    margin-bottom:15px;
}
/* ---------------------------web projects */
#wrap #web_projects { background-color: #2F5031;}
#wrap #web_projects .container * { color:#fff;}
#wrap #web_projects .container h2 {width:447px; color:#5D9360;}
#wrap #web_projects .container h2::after {background-color:#5D9360;}
#wrap #web_projects .container #project_swiper {}
#wrap #web_projects .container #project_swiper .slide {display:flex;}
#wrap #web_projects .container #project_swiper .slide .slide_left {background:url(../images/project_bg.jpg); width:1263px; height:100vh; margin-right:47px; position:relative;}
#wrap #web_projects .container #project_swiper .slide .slide_left .thumnail {
    width:900px; position:absolute; bottom:10px; left:50%; transform:translateX(-50%);}
#wrap #web_projects .container #project_swiper .slide .slide_left .thumnail img {width:100%;}
#wrap #web_projects .container #project_swiper .slide .right {position:relative; top:280px;}
#wrap #web_projects .container #project_swiper .slide .right .title {
    display:flex; align-items:flex-end; gap:46px;}
#wrap #web_projects .container #project_swiper .slide .right .title h3 {
    font-size:3.125rem; font-weight:700;
}
#wrap #web_projects .container #project_swiper .slide .right .title p {font-size:1.5rem;}
#wrap #web_projects .container #project_swiper .slide .right .program {margin:47px 0;}
#wrap #web_projects .container #project_swiper .slide .right .program span {font-family:'Lecend',sans-serif; border:1px solid #DAE5E2; padding:5px 12px; border-radius:19px; margin-right:12px;}
#wrap #web_projects .container #project_swiper .slide .right .period {
    display:flex; justify-content:space-between; width:361px; margin-bottom:125px;}
#wrap #web_projects .container #project_swiper .slide .right .period .period_left {}
#wrap #web_projects .container #project_swiper .slide .right .period .period_left p {
    font-size:1.313rem; font-weight:700; margin-bottom:20px;
}
#wrap #web_projects .container #project_swiper .slide .right .period .period_right {text-align:right;}
#wrap #web_projects .container #project_swiper .slide .right .period .period_right p {
    font-size:1.125rem; font-weight:300; margin-bottom:20px;
}
#wrap #web_projects .container #project_swiper .slide .right .site {}
#wrap #web_projects .container #project_swiper .slide .right .site a {font-size:1.875rem; font-family:'Lexend',sans-serif; position:relative; display:inline-block; margin-bottom:35px;}
#wrap #web_projects .container #project_swiper .slide .right .site a::after {
    content:''; width:100%; height:29px; background-color:rgba(218,229,226,0.5); display:inline-block; position:absolute; bottom:-15px; left:0; transform:scaleX(0); transform-origin:left center; transition:all 1s;
}
#wrap #web_projects .container #project_swiper .slide .right .site a:hover::after {transform:scaleX(1); transition:all 1s;}
#wrap #web_projects .container #project_swiper .slide .right .site a img {margin-left:5px; width:32px; position:relative; top:5px;}
.prev_btn {position:absolute; left:50px; width:50px;}
.next_btn {position:absolute; right:50px; width:50px;}
/* ---------------------------design */
#wrap #design {background-color:#DAE5E2; position:relative;}
#wrap #design h2 {width:352px; color:#5D9360;}
#wrap #design h2::after {background-color:#5D9360;}
#wrap #design .container {
    border:2px solid #5D9360; width:1578px; height:650px; padding:70px 79px;
    display:flex; gap:60px; border-radius:22px; position:absolute; left:50%; top:50%; transform:translate(-50%,-40%);
}
#wrap #design .container .container_left {width:1075px; height:508px;}
#wrap #design .container .container_right {width:288px;}
#wrap #design .container #bnr_swiper { margin-bottom:60px;}
#wrap #design .slide:hover img {transform:scale(1.1); transition:transform 1s;}
#wrap #design .container #bnr_swiper .bnr_swiper_wrapper {transition-timing-function:linear; height:160px;}
#wrap #design .container #bnr_swiper .bnr_swiper_wrapper .slide {
    cursor:pointer; overflow:hidden;
}
#wrap #design .container #bnr_swiper .bnr_swiper_wrapper .slide img {height:100%; width:100%;  object-fit:cover;}
#wrap #design .container #long_swiper {}
#wrap #design .container #long_swiper .long_swiper_wrapper {transition-timing-function:linear; height:288px;}
#wrap #design .container #long_swiper .long_swiper_wrapper .slide {
    cursor:pointer; overflow:hidden;
}
#wrap #design .container #long_swiper .long_swiper_wrapper .slide img {width:100%;}
#wrap #design .container #detail_swiper {}
#wrap #design .container #detail_swiper .detail_swiper_wrapper {transition-timing-function:linear; height:508px;}
#wrap #design .container #detail_swiper .detail_swiper_wrapper .slide {
    cursor:pointer; overflow:hidden;
}
#wrap #design .container #detail_swiper .detail_swiper_wrapper .slide img {width:100%;}
/* ---------------------------end */
#wrap #end {background-color:#DAE5E2; text-align:center;}
#wrap #end .end_text {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#wrap #end p {
    font-size:2.438rem; color:#2F5031; margin-bottom:23px; line-height:130%;
}
#wrap #end p em {font-weight:700; color:#2F5031;}
#wrap #end img {position:absolute; bottom:-100px; left:50%; width:354px; transform:translateX(-50%);}
/* -------------------------------공통 */
#wrap h2 {
    font-family:'Lexend', sans-serif; font-size:1.875rem; font-weight:700;
    position:absolute; left:0; top:160px; text-align:right; z-index:70;
}
#wrap h2::after {
    content:''; width:100%; height:1px; display:block; position:relative; top:10px;
    transform-origin:left center; animation:line_ani 1.5s linear both;
}
/* ---------------------------popup */
.popup_bg {
    background-color:rgba(0,0,0,0.8);
    position:fixed; left:0; top:0; z-index:800;
    height:100vh; width:100%; padding:80px;
    display:none;
}
.popup_bg .popup {
    margin:0 auto; width:800px;
    height:80vh; overflow:auto;
}
.popup_bg .popup img {width:100%;}

/* -------------------------닥터포헤어 popup */
.dr_popup_bg {
    background-color:rgba(0,0,0,0.8);
    position:fixed; left:0; top:0; z-index:800;
    height:100vh; width:100%; padding:80px;
    display:none;
}
.dr_popup_bg .dr_popup {
    margin:0 auto; width:1000px;
    height:80vh; overflow:auto;
}
.dr_popup_bg .dr_popup img {width:100%;}


@keyframes h1_ani {
    0% {transform:translate(0, 0); opacity:0;}
    100% {transform:translate(1%, 3%); opacity:1;}
}
@keyframes line_ani {
    0% {transform:scaleX(0);}
    100% {transform:scaleX(1);}
}
@keyframes ani {
    0% {transform:rotate(-40deg); z-index:-1;}
    50% {transform:rotate(-20deg); z-index:-1;}
    100% {transform:rotate(0); z-index:30;}
}
.active {color:#2F5031;}
.active2 {font-weight:500;}