header {
    position:fixed; left:0; top:0;
    background-color:#3F4E4F;
    width:100%; height:60px; z-index:99;
    display:flex; flex-flow:row nowrap;
    justify-content:space-between;
    align-items:center;
    padding:0 120px;
}
header nav {display:flex; flex-flow:row nowrap; gap:30px;}
header nav a {font-weight:600; color:#DCD7C9; font-size:1.125rem;}
header p {color:#DCD7C9;}
#wrap {
    height:100vh;
    background-color:#000;
}
#wrap .swiper-wrapper .intro {
    background-image:url(../images/intro.png);
    background-size:85%;
    background-position:center;
    background-repeat:no-repeat;
}
#wrap .swiper-wrapper .profile {
    width:1680px; margin:50px auto;
}
#wrap .swiper-wrapper .profile .profile_title {
    padding:30px 0; border-bottom:1px solid #fff;
}
#wrap .swiper-wrapper .profile .profile_title h1{
    color:#fff;
    font-size:2rem; font-weight:500;
}
#wrap .swiper-wrapper .profile .profile_main {
    margin-top:50px;
    display:flex; flex-flow:row nowrap; gap:384.5px;
}
#wrap .swiper-wrapper .profile .profile_main .info {
    display:flex; flex-flow:column nowrap; gap:30px;
}
#wrap .swiper-wrapper .profile .profile_main .info > * {
    color:#fff;
}
#wrap .swiper-wrapper .profile .profile_main .info h2 {
    font-size:1.5rem; font-weight:600;
}
#wrap .swiper-wrapper .profile .profile_main .info p {
    font-weight:500;
}
#wrap .swiper-wrapper .profile .profile_main .info img {
    width:263px; height:350px;
}
#wrap .swiper-wrapper .profile .profile_main .info a {
    font-weight:500;
}
#wrap .swiper-wrapper .profile .profile_main .keywords {
    text-align: center;
}
#wrap .swiper-wrapper .profile .profile_main .keywords > * {
    color:#fff;
}
#wrap .swiper-wrapper .profile .profile_main .keywords h2 {
    font-size:1.5rem; font-weight:600; margin-bottom:60px;
}
#wrap .swiper-wrapper .profile .profile_main .keywords .keywords_main {
    display:flex; flex-flow:column wrap; gap:-30px;
}
#wrap .swiper-wrapper .profile .profile_main .keywords .keywords_main p {
    width:200px; height:200px;
    border:3px solid #fff; border-radius:100px;
    text-align: center; line-height: 200px;
    color:#fff; margin-top:-30px;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu {
    text-align: center;
    display:flex; flex-flow:column nowrap; gap:50px;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .tool {
    display:flex; flex-flow:column nowrap; gap:25px;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .tool > * {
    color:#fff;
    line-height:140%;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .tool h2 {
    font-size:1.5rem; font-weight:600;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .tool p {
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .edu {
    display:flex; flex-flow:column nowrap; gap:35px;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .edu > * {
    color:#fff;
    line-height:140%;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .edu h2 {
    font-size:1.5rem; font-weight:600;
}
#wrap .swiper-wrapper .profile .profile_main .tool_edu .edu p {}
#wrap .swiper-wrapper .webdesign {
    width:1680px; margin:0 auto;
}
#wrap .swiper-wrapper .webdesign .web_title {
    padding:30px 0; border-bottom:1px solid #fff;
}
#wrap .swiper-wrapper .webdesign .web_title h1 {
    color:#fff;
    font-size:2rem; font-weight:500;
}
#wrap .swiper-wrapper .webdesign .container {
    width:1500px; margin:50px auto 0; padding:80px 0;
    position:relative;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper {
    border:2px solid #000;
    height:500px; width:1300px;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide1 {
    background-image:url(../images/casetify.png);
    background-size:70%; background-position: top right;
    background-repeat: no-repeat;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide1 .contents {display:flex; flex-flow:column nowrap; gap:15px;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide1 .contents li:first-child {font-size:1.5rem; font-weight:600;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide1 .contents li {color:#fff;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide1 .link {display:flex; flex-flow:column nowrap; gap:15px; margin-top:50px;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide1 .link a {
    color:#fff; background-color:#000; transition:filter 0.3s ease;
    width:200px; padding:10px 20px; border:1px solid #fff; border-radius:7px;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide1 .link a:hover {filter:invert(1)}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide2 {
    background-image:url(../images/bind.png);
    background-size:70%; background-position: top right;
    background-repeat: no-repeat;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide2 .contents {display:flex; flex-flow:column nowrap; gap:15px;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide2 .contents li:first-child {font-size:1.5rem; font-weight:600;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide2 .contents li {color:#fff;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide2 .link {display:flex; flex-flow:column nowrap; gap:15px; margin-top:50px;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide2 .link a {
    color:#fff; background-color:#000; transition:filter 0.3s ease;
    width:200px; padding:10px 20px; border:1px solid #fff; border-radius:7px;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide2 .link a:hover {filter:invert(1)}

#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide3 {
    background-image:url(../images/rangerover.png);
    background-size:70%; background-position: top right;
    background-repeat: no-repeat;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide3 .contents {display:flex; flex-flow:column nowrap; gap:15px;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide3 .contents li:first-child {font-size:1.5rem; font-weight:600;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide3 .contents li {color:#fff;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide3 .link {display:flex; flex-flow:column nowrap; gap:15px; margin-top:50px;}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide3 .link a {
    color:#fff; background-color:#000; transition:filter 0.3s ease;
    width:200px; padding:10px 20px; border:1px solid #fff; border-radius:7px;
}
#wrap .swiper-wrapper .webdesign .container #project_swiper .swiper-wrapper .slide3 .link a:hover {filter:invert(1)}
#wrap .swiper-wrapper .snsdesign {width:1680px; margin:0 auto; height:400px; overflow: hidden;}
#wrap .swiper-wrapper .snsdesign .sns_title {
    padding:30px 0; border-bottom:1px solid #fff;
}
#wrap .swiper-wrapper .snsdesign .sns_title h1 {
    color:#fff;
    font-size:2rem; font-weight:500;
}
#wrap .swiper-wrapper .snsdesign .container #sns_swiper {height:430px; margin:50px auto;}
#wrap .swiper-wrapper .snsdesign .container #sns_swiper .swiper-wrapper .swiper-slide {cursor: pointer;}
#wrap .swiper-wrapper .snsdesign .container #sns_swiper .swiper-wrapper .swiper-slide img {width:330px; transition:opacity 0.3s ease;}
#wrap .swiper-wrapper .snsdesign .container #sns_swiper .swiper-wrapper .swiper-slide img:hover {opacity:0.5;}
#wrap .swiper-wrapper .outro {
    background-image:url(../images/outro.png);
    background-size:80%;
    background-position:top center;
    background-repeat:no-repeat;
}
.popup_bg {
    position:fixed; left:0; top:0;
    z-index:999;
    background:rgba(0,0,0,0.4);
    width:100%; height:100vh;
    display:none;
}
.popup_bg .popup {
    width:700px; margin:60px auto;
    height:90vh; overflow:auto;
}
.popup_bg .popup img {
    width:100%;
}