header {
    position:fixed; top:0; left:0;
    padding:0 80px; width:100%; height:70px; z-index:900;
}
header nav {
    display:flex; flex-flow:row nowrap; gap:80px;
}
header nav a {width:max-content; color:#000; line-height:70px; position:relative;}
header nav a:after {
    content:''; display:block;
    width:100%; height:1px; background:#123458;
    position:absolute; bottom:1px;
    transform:scaleX(0);
    transition:transform 0.2s;
    transform-origin:center;
}
header nav a:hover {color:#123458;}
header nav a:hover::after {transform:scaleX(1);}
#wrap {height:100vh;}
#wrap > .swiper-wrapper {}
#wrap > .swiper-wrapper .swiper-slide {}
/* <!-- =========================================home --> */
#wrap > .swiper-wrapper #home {
    display:flex; flex-flow:column nowrap; gap:20px;
    justify-content:center; align-items:center;
    width:1920px; height:100vh;
    background:url(../images/background.jpg);
}
#wrap .swiper-wrapper #home .left {
    display:flex; flex-flow:column nowrap; justify-content:center; align-items:center;
}
#wrap .swiper-wrapper #home .left h1 {
    font-size:6.25rem; color:#123458; position:relative;
    padding:20px;
}
#wrap .swiper-wrapper #home .left h1::after {
    content:''; display:block; margin-bottom:20px;
    width:0; height:1px; background:#123458;
    position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
    animation:lineExpand 2s ease-out 0.3s forwards;
}
@keyframes lineExpand {
    0% {
    width: 0;
    opacity: 0;
    }
    100% {
    width: 880px;
    opacity: 1;
    }
}
#wrap .swiper-wrapper #home .design_wrap {
    text-align:center; display:flex; flex-flow:row nowrap;
    align-items:center; gap:20px;
}
#wrap .swiper-wrapper #home .design_wrap h2 {font-size:1.563rem;}
#wrap .swiper-wrapper #home .design_wrap h2 em {font-weight:700; color:#123458;}
#wrap .swiper-wrapper #home .design_wrap .designer p {font-size:1.875rem;}
#wrap .swiper-wrapper #home .design_wrap .designer p:nth-of-type(1) {opacity:0.3;}
#wrap .swiper-wrapper #home .design_wrap .designer p:nth-of-type(2) {margin:10px 0;}
#wrap .swiper-wrapper #home .design_wrap .designer p:nth-of-type(3) {opacity:0.3;}
#wrap .swiper-wrapper #home .skill_slide {
    position:absolute; left:0; bottom:0;
    background:#123458 url(../images/banner.png) 0 center repeat;
    opacity:0.5;
    height:40px; width:100%;
    animation:linear 15s linear infinite;
}
#wrap .swiper-wrapper #home .skill_slide:hover {animation-play-state: paused;}
@keyframes linear {
    0% {background-position-x:0;}
    100% {background-position-x:1000px;}
}
/* <!-- =========================================profile --> */
#wrap .swiper-wrapper #profile {
    padding:142px 120px;
}
#wrap .swiper-wrapper #profile .container {
    display:flex; flex-flow:row nowrap;
    justify-content:space-between;
}
#wrap .swiper-wrapper #profile .container .left {}
#wrap .swiper-wrapper #profile .container .left .title {
    margin-bottom:77px;
}
#wrap .swiper-wrapper #profile .container .left .title * {
    font-size:1.875rem;
}
#wrap .swiper-wrapper #profile .container .left .title h1 {
    margin-bottom:10px;
}
#wrap .swiper-wrapper #profile .container .left .title h2 {
    line-height:1.2;
}
#wrap .swiper-wrapper #profile .container .left .title h2 em {
    font-weight:700; color:#123458;
}
#wrap .swiper-wrapper #profile .container .left .me {}
#wrap .swiper-wrapper #profile .container .left .me img {}
#wrap .swiper-wrapper #profile .container .left .me > span {
    display:flex; flex-flow:column nowrap; gap:10px;
    margin-top:77px;
}
#wrap .swiper-wrapper #profile .container .left .me > span span,
#wrap .swiper-wrapper #profile .container .left .me > span a {
    display:flex; flex-flow:row nowrap;
}
#wrap .swiper-wrapper #profile .container .left .me > span span:first-of-type {color:#888;}
#wrap .swiper-wrapper #profile .container .left .me > span span em {font-weight:700; margin-right:20px;}
#wrap .swiper-wrapper #profile .container .left .me > span img {margin-right:10px;}
#wrap .swiper-wrapper #profile .container .middle {
    width:max-content; display:flex; flex-flow:column nowrap; justify-content: space-between;
}
#wrap .swiper-wrapper #profile .container .right {
    width:530px; display:flex; flex-flow:column nowrap; gap:65px;
}
#wrap .swiper-wrapper #profile .container .middle *,
#wrap .swiper-wrapper #profile .container .right * {line-height:1.2;}
#wrap .swiper-wrapper #profile .container .detail {
    display:flex; flex-flow:column nowrap; gap:20px;
}
#wrap .swiper-wrapper #profile .container .detail dt {
    font-size:1.25rem; font-weight:700;
}
#wrap .swiper-wrapper #profile .container .detail dt::after {
    content: "";
    display: inline-block;
    height: 1px;
    width: 433px;
    background: #000;
    margin-left: 10px;
    vertical-align: middle;
}
#wrap .swiper-wrapper #profile .container .detail dd {
    display:flex; flex-flow:row nowrap; gap:20px;
}
#wrap .swiper-wrapper #profile .container .detail dd span {}
#wrap .swiper-wrapper #profile .container .detail dd span em {margin-left:20px;}
#wrap .swiper-wrapper #profile .container .contact {gap:10px;}
#wrap .swiper-wrapper #profile .container .contact dd {position:relative;}
#wrap .swiper-wrapper #profile .container .contact dd:last-of-type {
    display:flex; flex-flow:column nowrap;
}
#wrap .swiper-wrapper #profile .container .contact dd:last-of-type img {
    border:1px solid #ccc; width:80px;
}
#wrap .swiper-wrapper #profile .container .contact dd:last-of-type em {
    position:absolute; bottom:-20px; left:0; color:#555; font-size:0.65rem;
}
#wrap .swiper-wrapper #profile .container .skill {}
#wrap .swiper-wrapper #profile .container .skill dd {
    width:40px; display:flex; flex-flow:row nowrap; justify-content:space-between;
}
#wrap .swiper-wrapper #profile .container .skill dd img {width:100%;}
/* <!-- =========================================ability --> */
#wrap > .swiper-wrapper #ability {padding:142px 120px;}
#wrap > .swiper-wrapper #ability .title {margin-bottom:153px;}
#wrap > .swiper-wrapper #ability .title * {font-size:1.875rem;}
#wrap > .swiper-wrapper #ability .title h1 {margin-bottom:10px;}
#wrap > .swiper-wrapper #ability .title h2 {line-height:1.2;}
#wrap > .swiper-wrapper #ability .title h2 em {font-weight:700; color:#123458;}
#wrap > .swiper-wrapper #ability .ability_wrap {
    display:flex; flex-flow:row nowrap; justify-content:space-between;
}
#wrap > .swiper-wrapper #ability .ability_wrap li {
    width:400px; height:400px; border-radius:50px; padding:95px 50px;
    display:flex; flex-flow:column nowrap; background-color:#123458;
    justify-content:space-between; align-items:center;
}
#wrap > .swiper-wrapper #ability .ability_wrap li:hover {background-color:#123669; box-shadow:0 0 10px rgba(0,0,0,0.5);}
#wrap > .swiper-wrapper #ability .ability_wrap li:hover img {transform:scale(1.1);}
#wrap > .swiper-wrapper #ability .ability_wrap li * {color:#fff;}
#wrap > .swiper-wrapper #ability .ability_wrap li img {width:100px;}
#wrap > .swiper-wrapper #ability .ability_wrap li em {
    font-weight:700; margin:27px 0 10px; font-size:1.125rem;
}
#wrap > .swiper-wrapper #ability .ability_wrap li span {font-weight:300; line-height:1.2;}
/* <!-- =========================================web design --> */
#wrap .swiper-wrapper #web_design {padding:142px 120px; background-color:#F0F2F5;}
#wrap .swiper-wrapper #web_design .title {margin-bottom:79px;}
#wrap .swiper-wrapper #web_design .title * {font-size:1.875rem;}
#wrap .swiper-wrapper #web_design .title h1 {margin-bottom:10px;}
#wrap .swiper-wrapper #web_design .title h2 {line-height:1.2;}
#wrap .swiper-wrapper #web_design .title h2 em {font-weight:700; color:#123458;}
#wrap .swiper-wrapper #web_design .container {
    width:1680px; position:relative; padding:50px 100px; background-color:#fff;
    border-radius:50px; overflow:hidden; height:500px;
}
#wrap .swiper-wrapper #web_design .container #web_design_swiper {}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper {}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide {
    display:flex; flex-flow:row nowrap;
}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .thumnail {width:50%;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .thumnail img {width:100%;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .slide3 .thumnail img {width:80%;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents {
    display:flex; flex-flow:column nowrap; gap:60px;
}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li:first-of-type {font-weight:700; font-size:1.563rem;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li:first-of-type em {font-weight:700; font-size:1.563rem; color:#555;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li:last-of-type {}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li ul {}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li ul li {width:100%; padding:10px 0; border-bottom:1px solid #ccc;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li a {
    padding:10px 15px; border-radius:5px; margin-right:10px; display:inline-block;
}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li a:nth-of-type(1) {background-color:#F1EFEC;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li a:nth-of-type(2) {background-color:#D4C9BE;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li a:nth-of-type(3) {background-color:#123458; color:#fff;}
#wrap .swiper-wrapper #web_design .container #web_design_swiper .swiper-wrapper .swiper-slide .contents > li a:nth-of-type(4) {
    background-color:#fefefe;
    color:#555; border:1px solid #ddd; border-radius:5px; margin-right:0;
}
/* <!-- =========================================etc design --> */
#wrap .swiper-wrapper #etc_design {padding:142px 120px; background-color:#F0F2F5;}
#wrap .swiper-wrapper #etc_design .title {
    display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:end;
}
#wrap .swiper-wrapper #etc_design .title * {font-size:1.875rem;}
#wrap .swiper-wrapper #etc_design .title h1 {margin-bottom:10px;}
#wrap .swiper-wrapper #etc_design .title h2 {line-height:1.2;}
#wrap .swiper-wrapper #etc_design .title h2 em {font-weight:700; color:#123458;}
#wrap .swiper-wrapper #etc_design .title .visual a {
    font-size:1rem; font-weight:500; color:#123458; text-decoration:underline;
}
#wrap .swiper-wrapper #etc_design .container {
    width:1680px; margin:50px auto 0; padding:50px;
    display:flex; flex-flow:row nowrap; gap:50px; background-color:#fff; border-radius:50px;
}
#wrap .swiper-wrapper #etc_design .container .ect_left {
    display:flex; flex-flow:column nowrap; justify-content:space-between;
}
#wrap .swiper-wrapper #etc_design .container .ect_left #banner_swiper {
    width:1200px; height:150px;
}
#wrap .swiper-wrapper #etc_design .container .ect_left #banner_swiper .swiper-wrapper {
    transition-timing-function:linear;
}
#wrap .swiper-wrapper #etc_design .container .ect_left #banner_swiper .swiper-slide {cursor:pointer; width:100%; overflow:hidden;}
#wrap .swiper-wrapper #etc_design .container .ect_left #banner_swiper .swiper-slide:hover {transform:rotate(5deg);}
#wrap .swiper-wrapper #etc_design .container .ect_left #banner_swiper .swiper-slide img {width:100%; margin:auto 0;}
#wrap .swiper-wrapper #etc_design .container .ect_left #etc_design_swiper {
    width:1200px; height:300px;
}
#wrap .swiper-wrapper #etc_design .container .ect_left #etc_design_swiper .swiper-wrapper {
    transition-timing-function:linear;
}
#wrap .swiper-wrapper #etc_design .container .ect_left #etc_design_swiper .swiper-slide {cursor:pointer;}
#wrap .swiper-wrapper #etc_design .container .ect_left #etc_design_swiper .swiper-slide:hover {transform:rotate(5deg);}
#wrap .swiper-wrapper #etc_design .container .ect_left #etc_design_swiper .swiper-slide img {width:100%;}
#wrap .swiper-wrapper #etc_design .container .ect_right {width:100%; height:100%;}
#wrap .swiper-wrapper #etc_design .container .ect_right #detail_swiper {
    height:500px; width:100%;
}
#wrap .swiper-wrapper #etc_design .container .ect_right #detail_swiper .swiper-wrapper {
    transition-timing-function:linear;
}
#wrap .swiper-wrapper #etc_design .container .ect_right #detail_swiper .swiper-slide {
    width:300px; cursor:pointer; overflow:hidden; margin:0 auto;
}
#wrap .swiper-wrapper #etc_design .container .ect_right #detail_swiper .swiper-slide:hover {transform:scale(1.1);}
#wrap .swiper-wrapper #etc_design .container .ect_right #detail_swiper .swiper-slide img {width:100%;}
/* <!-- =========================================thank you --> */
#wrap .swiper-wrapper #thank_you {
    display:flex; flex-flow:column nowrap; gap:20px;
    justify-content:center; align-items:center;
    width:1920px; height:100vh;
    background:url(../images/background.jpg);
}
#wrap .swiper-wrapper #thank_you .title {
    display:flex; flex-flow:column nowrap; justify-content:center; align-items:center;
}
#wrap .swiper-wrapper #thank_you .title h1 {
    font-size:6.25rem; color:#123458; position:relative; padding:20px;
}
#wrap .swiper-wrapper #thank_you .title h1::after {
    content:''; display:block; margin-bottom:20px;
    width:880px; height:1px; background:#123458;
    position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
}
#wrap .swiper-wrapper #thank_you .title h2 {margin-top:20px; font-size:1.563rem;}
#wrap .swiper-wrapper #thank_you .title h2 em {font-weight:700; color:#123458;}
#wrap .swiper-wrapper #thank_you .contact {
    display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; gap:10px;
}
#wrap .swiper-wrapper #thank_you .contact li {
    display:flex; flex-flow:row nowrap; gap:10px; position:relative; width:max-content;
}
#wrap .swiper-wrapper #thank_you .contact li:last-of-type {
    display:flex; flex-flow:column nowrap; align-items:center;
}
#wrap .swiper-wrapper #thank_you .contact li:last-of-type img {width:80px;}
/* <!-- 팝업창 --> */
/* 팝업창 */
.popup_bg {
    background-color:rgba(0,0,0,0.8); width:100%; height:100vh;
    position:fixed; top:0; left:0; z-index:800; display:none;
}
.popup_bg .popup {
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    max-height:80vh; width:800px; overflow:auto;
}
/* .popup_bg .popup {
    margin:80px auto; width:550px; overflow:auto; height:80vh;
} */
.popup_bg .popup img {width:100%;}