html, body {
    height:100%;
    margin:0;
    overflow:hidden;
}
#wrap {
    height:100vh;
    min-width:1920px;
}
#wrap > .swiper-wrapper {
    height:100vh;
}
#wrap > .swiper-wrapper > .swiper-slide {
    height:100vh;
}
.right_nav {
    position:fixed; right:54px; top:50%; transform:translateY(-50%);
    text-align:right;
    z-index:999;
}
.right_nav a {
    display:block;
    margin-bottom:20px;
    display:flex;
    justify-content:flex-end;
}
.right_nav a:hover em {display:block;}
.right_nav a em {display:none;}
.right_nav a:hover span {background-color: #FEE42F;}
.right_nav a span {
    width:20px; height:20px; background-color:#F0F0F0;
    border-radius:50%;
    margin-left:15px;
}
.wrap {}
.wrap main {}
.intro_wrap {
    background-image:url(../images/Intro/intro_bg.jpg);
    background-repeat:no-repeat;
    height:100vh;
    width:100%;
    margin-bottom:150px;
}
.about_wrap {
    height:100vh; width:100%;
    padding:50px 239px 112px;
}
/* about 1행 */
.about_wrap .profile_section {
}
.about_wrap .profile_section .profile_info {
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
}
.about_wrap .profile_section .profile_info .profile_image {
    transform-origin: center center;      /* 회전의 기준점을 가운데로 */
    animation: rotate 10s linear infinite;
    position:relative;
}
.about_wrap .profile_section .profile_info .profile_image img {
    transform-origin: center center;
    animation: rotate 10s linear infinite reverse;
}
.about_wrap .profile_section .profile_info .profile_image::after {
    content:'';
    width:10px; height:10px; background-color:#FEE430;
    border-radius:50%;
    z-index:20;
    position:absolute; left:55px; top:49px;
}
.about_wrap .profile_section .profile_info .profile_image::before {
    content:'';
    width:10px; height:10px; background-color:#FFF39F;
    border-radius:50%;
    z-index:20;
    position:absolute; right:-4px; top:50%;
}
.about_wrap .profile_section .profile_info .info_section {
    margin-left:96px;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap {
    display:flex;
    align-items:end;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .introduce {
    display:flex; flex-direction:column;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .introduce .name {}
.about_wrap .profile_section .profile_info .info_section .text_wrap .introduce .name h2 {
    margin-top:20px;
    margin-bottom:22px;
    font-size:1.563rem;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .info_grid {
    display:grid;
    grid-template-columns:65px 1fr;
    row-gap:18px;
    column-gap:21px;
    margin-right:59px;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .info_grid .label {
    font-size:1.063rem;
    color:#888;
    font-weight:500;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .info_grid .value {
    font-size:1.063rem;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .info_grid .value a {
    font-size:1.063rem;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .sunflower {
    margin-right:145px;
    margin-bottom:-5px;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .sunflower p {
    font-size:1.125rem;
    line-height:2;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .qr_wrap {
    text-align:center;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .qr_wrap .bubble {
    position:relative;
    animation:talk 2s ease-out infinite;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .qr_wrap .bubble img {}
    
.about_wrap .profile_section .profile_info .info_section .text_wrap .qr_wrap .bubble span {
    position:absolute; left:31px; top:11px;
    color:#fff;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .qr_wrap .qr {
    margin-top:15px;
}
.about_wrap .profile_section .profile_info .info_section .text_wrap .qr_wrap .qr img {}
/* about 2행 */
.about_wrap .info {
    display:flex;
    gap:33px;
    margin-top:45px;
}
.about_wrap .info .info_box {
    border:1px solid #d9d9d9;
    box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.25);
    border-radius:30px;
    width:458px; height:450px;
    padding-top:47px; padding-left:34px;
}
.about_wrap .info .info_box:nth-child(2) {
    padding-right:34px;
}
.about_wrap .info .info_box h2 {
    font-size:1.25rem;
    font-weight:500;
    margin-bottom:23px;
}
.about_wrap .info .info_box .Education_wrap {
    margin-bottom:50px;
}
.about_wrap .info .info_box .Education_wrap h2 {}
.about_wrap .info .info_box .Education_wrap .info_list {}
.about_wrap .info .info_box .Education_wrap .info_list li {
    display:grid;
    grid-template-columns:66px auto;
    column-gap:15px;
    margin-bottom:26px;
}
.about_wrap .info .info_box .Education_wrap .info_list li .date {}
.about_wrap .info .info_box .Education_wrap .info_list li .end {}
.about_wrap .info .info_box .skill_wrap {
}
.about_wrap .info .info_box .skill_wrap h2 {}
.about_wrap .info .info_box .skill_wrap .skill_icons {

}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk_box {
    
}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk_box img {
    width:55px; height:55px;
    
}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk_box span {
    font-size:0.688rem;
}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk1 {
    margin-bottom:15px;
    display:flex;
    gap:20px;
}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk1 .sk_box {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk1 .sk_box img {}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk1 .sk_box span {}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk2 {
    margin-bottom:15px;
    display:flex;
    gap:20px;
}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk2 .sk_box {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk2 .sk_box img {}
.about_wrap .info .info_box .skill_wrap .skill_icons .sk2 .sk_box span {}
/* 2번째 박스 */
.about_wrap .info .info_box .traning_wrap {
    margin-bottom:31px;
}
.about_wrap .info .info_box .traning_wrap h2 {}
.about_wrap .info .info_box .traning_wrap .info_list {}
.about_wrap .info .info_box .traning_wrap .info_list li {
    display:grid;
    grid-template-columns:66px auto;
    column-gap:21px;
    margin-bottom:15px;
}
.about_wrap .info .info_box .traning_wrap .info_list li .date {
    line-height:1.7;
}
.about_wrap .info .info_box .traning_wrap .info_list li .end {
    line-height:1.7;
}
.about_wrap .info .info_box .keywords_wrap {}
.about_wrap .info .info_box .keywords_wrap h2 {}
.about_wrap .info .info_box .keywords_wrap .keywords {
    display:flex;
}
.about_wrap .info .info_box .keywords_wrap .keywords span {
    background:#272727; color:#fff;
    border-radius:20px;
    font-size:0.875rem; font-weight:500;
    width:90px; height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:10px;
}
.about_wrap .info .info_box .keywords_wrap .keywords span:last-child {
    margin-right:0;
}
/* 3번째 박스 */
.about_wrap .info .info_box .license_wrap {}
.about_wrap .info .info_box .license_wrap h2 {}
.about_wrap .info .info_box .license_wrap .info_list {}
.about_wrap .info .info_box .license_wrap .info_list li {
    display:grid;
    grid-template-columns:65px auto;
    gap:32px;
    margin-bottom:26px;
}
.about_wrap .info .info_box .license_wrap .info_list li .date {}
.about_wrap .info .info_box .license_wrap .info_list li .end {}
/* 공통 li */
/* .about_wrap .info .info_box .info_list li {
    display:grid;
    grid-template-columns:66px auto;
    column-gap:18px;
    margin-bottom:15px;
} */
.about_wrap .info .info_box .info_list li:last-child {
    margin-bottom:0;
}
/* 공통 end,date */
.about_wrap .info .info_box .info_list li .date {
    font-weight:500;
    color:#888;
    font-size:1.063rem;
}
.about_wrap .info .info_box .info_list li .end {
    font-size:1.063rem;
}
/* 3. REDESIGN */
#redesign {
    height:100vh;
    padding:100px 234px;
}
#redesign #redesign-swiper {
    position:relative;
    width:100%;
}
#redesign #redesign-swiper .swiper-wrapper {
    display:flex;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide {
    width:1447px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project {
    display:flex;
    justify-content:space-between;
    margin-bottom:61px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info {}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_top {
    display:flex;
    gap:50px;
    align-items:center;
    margin-bottom:53.17px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_top .project_num {
    position:relative;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_top .project_num img {
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_top .project_num span {
    position:absolute; top:32px; left:47px;
    z-index:10;
    font-size:1.563rem;
    font-weight:600;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_top .project_topic {}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_top .project_topic .category {
    font-size:1.25rem;
    margin-bottom:15px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_top .project_topic .title {
    font-size:1.875rem;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .overview {}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .overview .icon_title {
    display:flex;
    align-items:center;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .overview .icon_title img {}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .overview .icon_title h3 {
    font-weight:500;
    color:#888;
    margin-left:7px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .overview p {
    margin-top:22px;
    line-height:2.0;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details {
    margin-top:55px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .dt_left {
    display:flex; 
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .dt_left .star {
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .dt_left .star img {
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap {
    display:flex;
    gap:30px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .dt_left {}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .dt_left .desc {
    margin-left:7px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .dt_left .desc .redesign_desc {}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .dt_left .desc .redesign_desc h3 {
    font-weight:500;
    color:#888;
    line-height:1.7;
    margin-bottom:13px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .details_contents {}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .details .desc_wrap .details_contents span {
    display:flex;
    flex-flow:column nowrap;
    line-height:1.7;
    margin-bottom:13px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_btn {
    display:flex;
    gap:25px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_info .project_btn .btn {
    width:140px; height:52px;
    border-radius:10px;
    background-color:#272727;
    display:flex; align-items:center; justify-content:center;
    font-weight:600;
    font-size:1.063rem;
    color:#fff;
    line-height:1;
    margin-top:80px;
    margin-bottom:87px;
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_image {
}
#redesign #redesign-swiper .swiper-wrapper .swiper-slide .project .project_image img {
    width:735px;
}
#redesign #redesign-swiper .swiper-scrollbar {
    position: absolute;
    width:100%;
    bottom:0px; left:0; 
    height:2px;
    background:#ccc;
}
#redesign #redesign-swiper .swiper-scrollbar .swiper-scrollbar-drag {
    height:100%;
    background-color:#000;
    transition:width 0.3s ease;
}
/* 4. GRAPHIC */
#graphic {
    padding:74px 240.5px 143px;
}
#graphic .graphic_inner {
}
#graphic .graphic_title {
    margin-bottom:84px;
    display:flex;
    align-items:center;
    gap:22px;
}
#graphic .graphic_title h2 {
    font-size:2.5rem;
    font-weight:600;
}
#graphic .graphic_title .line {
    width:33px; height:1px; background-color:#000;
}
#graphic .graphic_title .cat {}
#graphic .graphic_group {
    margin-bottom:46px;
    height:auto;
    position:relative;
}
#graphic .graphic_group h3 {
    font-weight:500;
    font-size:1.25rem;
    margin-bottom:30px;
}
.graphic_wrap .graphic_inner .graphic_group #sns-swiper {
    width:1439px;
    height:380px;
}
#graphic .graphic_group #sns-swiper .swiper-wrapper {
    
}
#graphic .graphic_group #sns-swiper .swiper-wrapper .swiper-slide {
    overflow: hidden;
}
.graphic_wrap .graphic_inner .graphic_group #sns-swiper .swiper-wrapper .swiper-slide img {
    width:341px;
    height:380px;
    object-fit:cover;
    border-radius:10px;
}
.graphic_wrap .graphic_inner .graphic_group #banner-swiper {
    width:1439px;
    height:145px;
}
#graphic .graphic_group #banner-swiper .swiper-wrapper {
}
#graphic .graphic_group #banner-swiper .swiper-wrapper .swiper-slide {
}
#graphic .graphic_group #banner-swiper .swiper-wrapper .swiper-slide img {
    width:341px; 
    height: 145px;
    object-fit:cover;
    border-radius:10px;
}
/* 스와이퍼 공통 */
#graphic .graphic_group .swiper {
    width:100%;
}
#graphic .graphic_group .swiper .swiper-wrapper {
    transition-timing-function:linear;
    display:flex;
}
#graphic .graphic_group .swiper .swiper-wrapper .swiper-slide {
    cursor:pointer;
}
#graphic .graphic_group .swiper .swiper-wrapper .swiper-slide:hover {
    opacity:0.5;
    transform:rotate(2deg);
}
#graphic .graphic_group .swiper .swiper-wrapper .swiper-slide img {
}
#graphic .graphic_group .swiper {
    width:100%;
}
#graphic .graphic_group .swiper .swiper-wrapper {
    display:flex;
}
#graphic .graphic_group .swiper .swiper-wrapper .swiper-slide {}
#graphic .graphic_group .swiper .swiper-wrapper .swiper-slide img {
    width:100%;
}
/* 팝업 */
.popup_bg {
    position:fixed; left:0; top:0;
    z-index:800;
    background-color:rgba(0,0,0,0.6);
    height:100vh; width:100%;
    display:none;
}
.popup_bg .popup {
    position: absolute;
    left:50%;
    top:50%;
    width:700px;
    height:80vh;
    transform: translate(-50%, -50%);
    overflow:auto; 
}
.popup_bg.sns_popup .popup {
    width:700px;
    height:80vh;
}
.popup_bg.banner_popup .popup {
    width:900px;
    height:40vh;
    top:33%;
    transform:translateX(-50%);
}
.popup_bg .popup img {
    display:block;
    width:100%;
    height:auto;
}

/* 5. DETAIL */
.detail_wrap#detail {
    padding:50px 241px 132px;
    height:1000px;
}
.detail_wrap#detail .detail_top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:58px;
}
.detail_wrap#detail .detail_top .detail_title {
    display:flex;
    align-items:center;
    gap:22px;
}
.detail_wrap#detail .detail_top .detail_title h2 {
    font-size:2.5rem;
    font-weight:600;
}
.detail_wrap#detail .detail_top .detail_title .line {
    width:33px; height:1px; background-color:#000;
}
.detail_wrap#detail .detail_top .detail_title .cat {}
.detail_wrap#detail .detail_top .detail_btn_wrap {
}
.detail_wrap#detail .detail_top .detail_btn_wrap .detail_prev {
    margin-right:44px;
}
.detail_wrap#detail .detail_top .detail_btn_wrap .detail_next {}
.detail_wrap#detail .detail_group {
}
.detail_wrap#detail .detail_group .mockup {
}
.detail_wrap#detail .detail_group .mockup .swiper#detail-swiper {
}
.detail_wrap#detail .detail_group .mockup .swiper#detail-swiper .swiper-wrapper {
    display:flex;
}
.detail_wrap#detail .detail_group .mockup .swiper#detail-swiper .swiper-wrapper .swiper-slide {
    cursor:pointer;
}
.detail_wrap#detail .detail_group .mockup .swiper#detail-swiper .swiper-wrapper .swiper-slide:hover {
    opacity:0.5;
}
.detail_wrap#detail .detail_group .mockup .swiper#detail-swiper .swiper-wrapper .swiper-slide img {
}
/* 6. OUTRO */
.outro_wrap#outro {
    background-image:url(../images/outro/outro_bg.jpg);
    background-repeat:no-repeat;
    height:100vh;
    width:100%;
    position:relative;
}
.outro_wrap#outro .outro_inner {
    text-align:center;
    position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);
}
.outro_wrap#outro .outro_inner .rotate_sun {
    animation:rotate 5s linear infinite;
    margin-bottom:26px;
}
.outro_wrap#outro .outro_inner h2 {
    font-weight:500;
    font-size:2.188rem;
    margin-bottom:30px;
}
.outro_wrap#outro .outro_inner .thanks {
    font-weight:300;
    font-size:1.375rem;
    margin-bottom:46px;
}
.outro_wrap#outro .outro_inner .subtext {
    font-weight:300;
    font-size:1.375rem;
    line-height:2.0;
}
.outro_wrap#outro .outro_inner .subtext span {
    font-family: "ABeeZee", sans-serif;
}
.outro_wrap#outro .outro_inner .subtext strong {
    font-weight:600;
}

/* 애니메이션 */
@keyframes rotate {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

@keyframes talk {
    0% { transform: translateY(0); }
    20% { transform: translateY(-5px); }
    50% { transform: translateY(0); }
    80% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}