header {position:fixed; top:35px; left:35px; width:100%; z-index:900;/*  background-color:#fff; */}
header nav {display:flex;}
header nav button {margin-right:60px;}
header nav a {margin-right:60px; line-height:29px; display:block; font-size:1.125rem; font-weight:600; transition:all 0.5s; color:#fff;}
header nav a:last-child {margin-right:0px;}
#wrap {
    height:100vh; background-color:#222;
}
#wrap .swiper-wrapper {}
#wrap .swiper-wrapper .intro {
    display:flex; flex-flow:column nowrap; 
    justify-content:center; align-items:center; 
    position:relative; overflow:hidden;
}
#wrap .swiper-wrapper .profile {}
#wrap .swiper-wrapper .project {}
#wrap .swiper-wrapper .contact {}
/* 1행 */
/* #wrap .swiper-wrapper .intro .intro_content video {position:absolute; z-index:-1; top:-1000px; left:0; transform:rotate(-90deg); width:100%;} */
#wrap .swiper-wrapper .intro .intro_content {width:60vw; height:70vh; background-color:#f5f5f5; border-radius:20px; padding:80px; display:flex; flex-flow:column nowrap; position:relative;}
#wrap .swiper-wrapper .intro .intro_content h1 {font-size:6.25rem; margin-bottom:40px; text-align:center;}
#wrap .swiper-wrapper .intro .intro_content .job {position:absolute; right:80px; top:60%; transform:translateY(-50%);}
#wrap .swiper-wrapper .intro .intro_content .job p {margin-bottom:25px; cursor:default; display:flex;}
#wrap .swiper-wrapper .intro .intro_content .job p::before {content:''; display:block; width:40px; height:40px; background:url(../images/icon/none_light_icon.png) no-repeat center / cover; position:relative; bottom:8px; right:13px;}
#wrap .swiper-wrapper .intro .intro_content .job p:hover::before {background:url(../images/icon/light_icon.png) no-repeat center / cover;}
#wrap .swiper-wrapper .intro .intro_content .job p em {font-size:1.75rem; font-weight:600;}
#wrap .swiper-wrapper .intro .intro_content > P {font-size:1.5rem; font-weight:500; margin-top:auto;}
/* 2행 */
#wrap .swiper-wrapper .profile .container {
    width:1301px; margin:100px auto 0;
    display:flex; justify-content:space-between; /* height:100vh; */
    border-radius:25px; align-items:center;
}
#wrap .swiper-wrapper .profile .container .photo_info {width:max-content; height:80vh; background-color:#F6F6F6; padding:30px; border-radius:20px;}
#wrap .swiper-wrapper .profile .container .photo_info img {width:180px; display:block; margin:0 auto 50px; border-radius:24px;}
#wrap .swiper-wrapper .profile .container .photo_info .info {}
#wrap .swiper-wrapper .profile .container .photo_info .info li:first-child {margin-bottom:80px; font-size:1.5rem; font-weight:700; line-height:1.5;}
#wrap .swiper-wrapper .profile .container .photo_info .info li {margin-bottom:22px; font-size:0.938rem; font-weight:500;}
#wrap .swiper-wrapper .profile .container .photo_info .info li:last-child {margin-bottom:0px;}
#wrap .swiper-wrapper .profile .container .resume {width:calc(100% - 410px); background-color:#f6f6f6; padding:50px 50px; border-radius:20px; height:80vh;}
#wrap .swiper-wrapper .profile .container .resume {display:flex; flex-flow:column nowrap; justify-content:space-between;}
#wrap .swiper-wrapper .profile .container .resume ul {/* margin-bottom:40px; */}
#wrap .swiper-wrapper .profile .container .resume ul li:first-child {margin-bottom:24px;}
#wrap .swiper-wrapper .profile .container .resume ul li {display:flex; margin-bottom:18px;}
#wrap .swiper-wrapper .profile .container .resume ul li h3 {font-size:1.375rem; font-weight:600;}
#wrap .swiper-wrapper .profile .container .resume ul li span {font-weight:400; opacity:0.8; margin-right:24px; font-size:0.938rem;}
#wrap .swiper-wrapper .profile .container .resume ul li em {font-weight:500; font-size:0.938rem;}
#wrap .swiper-wrapper .profile .container .resume .skill {display:flex; margin-bottom:0; position:relative; width:max-content;}
#wrap .swiper-wrapper .profile .container .resume .skill  li {margin-bottom:0; margin-right:20px;}
#wrap .swiper-wrapper .profile .container .resume .skill  li:first-child {margin-bottom:0;}
#wrap .swiper-wrapper .profile .container .resume .skill  li span {cursor:pointer; margin-right:0; line-height:40px;}
#wrap .swiper-wrapper .profile .container .resume .skill  li em {display:none; position:absolute; top:55px; left:0; width:max-content; background-color:#fff; padding:10px; border-radius:10px;}
/* 3행 */
#wrap .swiper-wrapper .project {}
#wrap .swiper-wrapper .project .container {
    width:100%; margin:110px auto 0px; text-align:center;
    position:relative;
}
#wrap .swiper-wrapper .project .container h2 {font-size:2.5rem; font-weight:700; color:#fff;}
#wrap .swiper-wrapper .project .container #project_swiper {
    background-color:#f6f6f6;
    border-radius:30px;
    width:1487px;
    margin-top:44px;
}
#wrap .swiper-wrapper .project .container .swiper-button-prev {top:30px; left:500px; background:url(../images/icon/webProject_left_arrow_w.png) no-repeat center / cover; width:36px; height:36px;}
#wrap .swiper-wrapper .project .container .swiper-button-prev::after {display:none;}
#wrap .swiper-wrapper .project .container .swiper-button-next {top:30px; right:500px; background:url(../images/icon/webProject_right_arrow_w.png) no-repeat center / cover; width:36px; height:36px;}
#wrap .swiper-wrapper .project .container .swiper-button-next::after {display:none;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper {}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide {}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content {display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; padding:30px;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .web_project_content .thumnail {/* margin-right:100px; */}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .thumnail img {width:820px; height:600px;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents {text-align:left; padding:0px 0;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li {font-size:1.25rem; margin-bottom:40px;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li:first-child {margin-bottom:50px;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li:last-child {margin-bottom:0px;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li:first-child span {margin-right:0; display:none;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li:first-child em {font-size:1.5rem; font-weight:700;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li span {font-weight:600; width:75px; display:inline-block; margin-right:40px; font-size:1rem;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li em {font-size:1rem;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li img {margin-right:20px;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li img:last-child {margin-right:0px;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li a {margin-right:20px; border:1px solid #000; border-radius:20px; padding:16px 20px; font-weight:500; font-size:1.063rem; display:inline-block;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide:nth-child(3) .web_project_content .contents li a:first-child {}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide:nth-child(4) .web_project_content .contents li a:first-child {display:none;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li a:hover {background-color:#333; color:#fff;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li a:last-child {margin-right:0px; border:none; font-size:0.938rem; padding:0 0 5px 0; color:#333; border-radius:0;}
#wrap .swiper-wrapper .project .container #project_swiper .swiper-wrapper .swiper-slide .web_project_content .contents li a:last-child:hover {background-color:#f6f6f6; color:#000; border-bottom:1px solid #000;}
/* 4행 */
#wrap .swiper-wrapper .design .container {width:1402px; margin:157px auto 0; /* background-color:aqua; */}
#wrap .swiper-wrapper .design .container h2 {font-size:2.25rem; font-weight:700; color:#fff;}
#wrap .swiper-wrapper .design .container .contents {display:flex; align-items:center;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr {margin-right:102px;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #bnr_swiper {width:960px; height:100px;  margin-bottom:40px;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #bnr_swiper .swiper-wrapper {transition-timing-function: linear;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #bnr_swiper .swiper-slide {cursor:pointer; overflow:hidden; border-radius:10px;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #bnr_swiper .swiper-slide:hover {transform:rotate(5deg);}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #bnr_swiper .swiper-slide img {width:100%;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #sns_swiper {width:860px; height:360px;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #sns_swiper .swiper-wrapper {transition-timing-function: linear;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #sns_swiper .swiper-slide {cursor:pointer; overflow:hidden; border-radius:10px;}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #sns_swiper .swiper-slide:hover {transform:rotate(5deg);}
#wrap .swiper-wrapper .design .container .contents .sns_bnr #sns_swiper .swiper-slide img {height:100%;}
#wrap .swiper-wrapper .design .container .contents #detail_swiper {width:340px; height:650px;}
#wrap .swiper-wrapper .design .container .contents #detail_swiper .swiper-wrapper {transition-timing-function: linear;}
#wrap .swiper-wrapper .design .container .contents #detail_swiper .swiper-slide {cursor:pointer; overflow:hidden; border-radius:10px;}
#wrap .swiper-wrapper .design .container .contents #detail_swiper .swiper-slide:hover {}
#wrap .swiper-wrapper .design .container .contents #detail_swiper .swiper-slide img {width:100%;}
#wrap .swiper-wrapper .contact {padding:335px 0 0; text-align:center;}
#wrap .swiper-wrapper .contact h2 {font-size:2.5rem; margin-bottom:70px; font-weight:700; color:#fff;}
#wrap .swiper-wrapper .contact .information {display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;}
#wrap .swiper-wrapper .contact .information img {width:150px; margin-right:51px;}
#wrap .swiper-wrapper .contact .information ul {text-align:left;}
#wrap .swiper-wrapper .contact .information ul li:first-child {margin-bottom:38px;}
#wrap .swiper-wrapper .contact .information ul li {margin-bottom:20px; display:flex; align-items:center;}
#wrap .swiper-wrapper .contact .information ul li span {opacity:0.8; font-weight:500; width:54px; display:inline-block; color:#fff;}
#wrap .swiper-wrapper .contact .information ul li:first-child span {width:0px;}
#wrap .swiper-wrapper .contact .information ul li:first-child em {font-size:1.5rem; margin-left:0;}
#wrap .swiper-wrapper .contact .information ul li em {font-size:1.125rem; margin-left:20px; font-weight:500; color:#fff;}
#wrap .swiper-wrapper .contact .information ul li em a {background-color:#f5f5f5; width:max-content; display:inline-block; border-radius:15px;}
#wrap .swiper-wrapper .contact .information ul li em a img {width:30px; margin:0;}
.popup_bg {background-color:rgba(0,0,0,0.5); width:100%; height:100vh; position:fixed; top:0; left:0; z-index:500; display:none;}
.popup_bg .popup {width:700px; height:80vh; margin:80px auto; overflow:auto;}
.popup_bg .popup img {width:100%;}