*{box-sizing: border-box}

body{
/* font-family: 'Nanum Gothic Coding', monospace; */
font-family: 'Hind', sans-serif;}

a,span{display: block}
.center_transform{transform: translate(-50%,-50%);left: 50%;top: 50%}

.M_btn{position: absolute;right: 50px;top: 50px;width: 50px;height: 86px;background: url(../protfolio/img/intro_mobile_icon.png)no-repeat;background-size: contain;cursor: pointer;cursor: pointer;z-index: 5000;}
.M_btn span{position: absolute;transform: translate(-50%,-50%);left: 50%;top: 50%;font-size: .9vw;color: #fff}
.M_mobile{position: absolute;right: -100%;top: 20%;width: 340px;height: 594px;z-index: 9999;transition: all .5s ease;padding-bottom: 114px;-webkit-box-shadow: -15px 8px 20px -10px rgba(0,0,0,.2);box-shadow: -15px 8px 20px -10px rgba(0,0,0,.2);border-radius: 64px}
.M_mobile::after,.M_mobile::before{content: "";display: inline-block;width: 100%;height: 100px;background: #fff;}
.M_mobile::after{border-radius: 0 0 46px 46px;margin-top: -45px}
.M_mobile::before{border-radius: 46px 46px 0 0;margin-bottom: -60px}
.responsive_M_head{width: 24px;height: 3px;border-radius: 1.5px;background-color: #c9cbcc;position: absolute;top: 23px;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%)}
.responsive_M_btm_btn{width: 30px;height: 30px;border-radius: 30px;background: #c9cbcc;position: absolute;left: 50%;bottom: 8px;transform: translate(-50%,-50%)}
.responsive_M_btm_btn::after{content: "";width: 25px;height: 25px;border-radius: 25px;background: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
.M_mobile.on{right: 2%}
.M_mobile iframe{width: 100%;height: 100%;z-index: 1001;border-top: 3px solid #c9cbcc;border-bottom: 3px solid #c9cbcc}
.iframe_wrap{border-radius: 15px;overflow: hidden;z-index: 1000;}
.mobile_wrap{width: 100%;margin-left: auto;height: 100vh;position: absolute;overflow: hidden;}
@media only screen and (max-width:480px){
    .responsive_M_btn{display: none}
    .responsive_M_mobile{display: none}
}

header{position: fixed;width: 30%;margin: 40px;z-index: 1111;}
.sitemap_btn{float: left;position: relative;width: 90px;height: 64px;z-index: 9999;}
.sitemap_btn a{width: 100%;height: 100%;background: url(../protfolio/img/intro_siteMap_btn_w.png)no-repeat;background-size: contain}
.nav_site{position: absolute;right: 80px;top: 0;text-align: right}
.nav_site ul{float: right}
.nav_site ul li{float: left;position: relative;z-index: 100;width: 100px;height: 20px;text-align: center}
.nav_site ul li i{font-style: unset;position: relative;z-index: 100;}
.nav_site span{position: absolute;transform: rotate(45deg) translate(-50%,-50%);width: 200px;height: 200px;
left: -50%;top: -130px;border-radius:37px;transition: all .5s ease}
.nav_site ul li:nth-child(1) span{background: #505daa;}
.nav_site ul li:nth-child(2) span{background: #61B4E4;}
.nav_site ul li:nth-child(3) span{background: #f05971;}
.nav_site ul li:nth-child(4) span{background: #bb70ad;}
.nav_site ul li.on span{top: -30px}
.nav_site ul li.on{color:#fff}

@media only screen and (max-width:480px){
    header{margin: 16px}
    .sitemap_btn{width: 48px;height: 34px}
    .sitemap_btn a span{height: 4px}
    .sitemap_btn a span:nth-child(2){top: 8px}
    .sitemap_btn a span:nth-child(3){top: 16px}
}

/*index page*/

#intro_sec{width: 100%;height: 100vh;overflow:hidden;position: relative;background: #fff}

.intro_my_Tit{width: 500px;height: 200px;transform: skew(56deg, -34deg) scaleY(.66667);position: absolute;left: 38%;top: -50%;font-size: 28px;text-shadow: 4px 4px 2px rgba(17, 26, 31, 0.2);line-height: 60px}
.intro_my_Tit span{display: inline-block;overflow: hidden;vertical-align: middle}
.intro_my_Tit b.intro_big{font-size: 60px;transform: scaleY(1.5)}
.intro_my_Tit b{display: block;font-weight: normal}

.caption span { font-size:40px; display: inline-block}
.type-cursor {animation:blink .4s ease infinite;opacity:0; }
@keyframes blink {
    100% { opacity:1; }
}

.hover_img{position: absolute;transform: translate(-50%,-50%)}
.hover_img img{opacity: 0;position: absolute;transition: all .2s linear}
.hover_img img.onn{opacity: 1;}
.hover_img img.on{opacity: 1;}

.intro_bg_gradient{width: 100%;height: 100%;position: absolute;background-size: cover;}

.intro_bg_grand{width: 1200px;height: 600px;position: relative;transform: translate(-50%,-50%);left: 50%;top: 65%}

.hover_box{width: 275px;height: 360px;position: absolute;cursor:pointer}
.hover_box a{width: 100%;height: 100%;}
.hover_box_PJ{left: -9% ;top: 5%;height: 430px;z-index: 150;}
.hover_box_WR{left: 82% ;top: 20%;z-index: 150;}
.hover_box_GP{left: 13%;top: -21%;z-index: 110}
.hover_box_AM{left: 65%;top: -17%;z-index: 110}

.intro_bg_line{position: absolute;left: 50%;top: 33%;transform: translate(-50%,-50%)}

.intro_center{position: absolute;left: 51.5%;top: 80%;transform: translate(-50%,-50%);z-index: 50;}
.intro_center img{left: 50%;bottom: -50%;transform: translateX(-50%);transition: all .5s ease}

.intro_project{left: -15%;top: 5%;z-index: 100;color: #505daa}
.intro_work{right: 42%;top: 11%;z-index: 45;color: #43bdaa}
.intro_graphic{left: 13%;top: -21%;z-index: 25;color: #f05971}
.intro_aboutMe{right: 42%;top: -17%;z-index: 25;color: #bb70ad}

.intro_bg_me{position: absolute;left: 30%;bottom: 0;z-index: 500;}
.intro_bg_me img{vertical-align:bottom}

.intro_bg_tile,.intro_bg_tileBox{position: absolute;}
.intro_bg_tile{left: 9.5%;bottom: 3%}
.intro_bg_tileBox{left: 60%;bottom: -8%;z-index: 100;}

.intro_words{position: absolute;transition: all .5s ease}

.intro_project .intro_words{text-shadow: 2px 2px 1px rgba(80, 93, 170, 0.4)}
.intro_work .intro_words{text-shadow: 2px 2px 1px rgba(67, 189, 170, 0.4)}
.intro_graphic .intro_words{text-shadow: 2px 2px 1px rgba(240, 89, 113, 0.4)}
.intro_aboutMe .intro_words{text-shadow: 2px 2px 1px rgba(187, 112, 173, 0.4)}

.intro_words p{padding: 40px 0;font-size: 32px;transform: translate3d(0, -50px, 0);transition: all .4s ease-in-out;white-space: nowrap;}
.intro_words.on p{transform: translate3d(0,50px,0)}
.intro_words.Mon{left: 30%;}

.intro_line{height: 30px;overflow: hidden;}

@media only screen and (min-width:481px){
    .intro_line{transform: skew(60deg, -36deg) scaleY(.66667);}
    .intro_project .intro_words{left: 170px;top: 400px}
    .intro_work .intro_words{left: 375px;top: 370px}
    .intro_graphic .intro_words{left: 110px;top: 325px}
    .intro_aboutMe .intro_words{left: 140px;top: 325px}

}
@media only screen and (max-width:480px){
    #intro_sec{height: calc(var(--Mvh, 1vh) * 100);}
    .intro_bg_gradient{display: none}
    .intro_bg_me{width: 50%;height: 20%;left: 0;top: 0;z-index: 1;}
    .intro_bg_me img{width: 100%;position: absolute;bottom: 0;left: 0}
    .intro_bg_grand{width: 100%;height: 100%;left: 0;top: 0;transform: translate(0,0)}
    .intro_my_Tit{width: 320px;height: 110px;transform: skew(0, 0) scaleY(1);left: 50%;top: 3%;font-size: 2.5vw;line-height: 27px}
    .caption span{font-size: 5vw}
    .intro_bg_line{display: none}
    .intro_M_wrap{position: absolute;width: 100%;height: 100%}
    .intro_M_list{position: relative;width: 100%;height: 20%;background-size: contain}
    .intro_M_list:nth-child(2){background-image: url(../protfolio/img/intro_bg_gradient_1.png)}
    .intro_M_list:nth-child(3){background-image: url(../protfolio/img/intro_bg_gradient_2.png)}
    .intro_M_list:nth-child(4){background-image: url(../protfolio/img/intro_bg_gradient_3.png)}
    .intro_M_list:nth-child(5){background-image: url(../protfolio/img/intro_bg_gradient_4.png)}
    .hover_img{position: sticky;width: 100%;height: 100%;transform: translate(0,0)}
    .hover_img img{height: 95%;padding-left: 10px;padding-top: 1%;}
    .intro_center{height: 20%;position: absolute;z-index: 700;left: 0;top: 0;z-index: 100;}
    .intro_center img.onn{opacity: 0;}
    .intro_center img{left: 85%;top: 100%;opacity: 1;}
    .intro_center img:nth-child(3){top: 200%}
    .intro_center img:nth-child(4){top: 300%}
    .intro_center img:nth-child(5){top: 400%}
    .hover_box{position: absolute;width: 100%;height: 100%;left: 0;top: 0}
    .intro_words{left: 0%;top: 50%;transform: translateY(-50%);overflow: unset;width: 100%;}
    .intro_line{transform: skew(0deg,0deg),scaleY(1);overflow: unset}
    .intro_words p{width: 100%;text-align: center;padding: 0;font-size: 24px;transform: translate3d(0,0,0);text-align: center}
    .intro_bg_tile{display: none}
    .intro_bg_tileBox{display: none}
}

/*project page*/
.project_body{background: #26245d}
#project_tit{width: 100%;height: 67vh;position: relative;background-image: url(../protfolio/img/project_top_bg_system.png),url(../protfolio/img/project_top_bg_gradient.png);
background-repeat: no-repeat;background-position: center top,center top;background-attachment: fixed;overflow: hidden;background-size: contain,100% 67%;}

.project_ground{width: 1200px;height: 100%;position: relative;}

.porject_me{position: absolute;bottom:0;z-index: 100;width:100%;height: 400px;background-image: url(../protfolio/img/project_top_me.png);background-repeat: no-repeat;background-position: 75% 101%;background-attachment: fixed;}

.project_cube{position: absolute;z-index: 50;}

.project_cube_1{width: 305px;height: 181px;left: 45%;top: 10%;background: url(../protfolio/img/project_top_cube_box_1.png)no-repeat;
animation: project_cube_1 3s ease-in-out infinite}
.project_cube_2{width: 252px;height: 272px;left: -15%;top: 50%;background: url(../protfolio/img/project_top_cube_box_2.png)no-repeat;
animation: project_cube_2 3s ease-in-out infinite}
.project_cube_3{width: 28px;height: 29px;left: 15%;top: 80%;background: url(../protfolio/img/project_top_cube_box.png)no-repeat;
animation: project_cube_3 3s ease-in-out infinite}
.project_cube_4{width: 252px;height: 272px;left: 75%;top: 60%;background: url(../protfolio/img/project_top_cube_box_2.png)no-repeat;
animation: project_cube_4 3s ease-in-out infinite}

@keyframes project_cube_1{
    0%{top: 10%}
    50%{top: 20%}
    100%{top: 10%}
}
@keyframes project_cube_2{
    0%{top: 50%}
    50%{top: 45%}
    100%{top: 50%}
}
@keyframes project_cube_3{
    0%{top: 80%}
    50%{top: 83%}
    100%{top: 80%}
}
@keyframes project_cube_4{
    0%{top: 60%}
    50%{top: 65%}
    100%{top: 60%}
}

#project_sec{background: #26245d;overflow: hidden;width: 100%;height: 100vh;position: relative;}

.project_gradient_wrapper{max-width: 1900px;margin:auto;position: relative;overflow: hidden;padding-bottom: 30px}

.project_slideContainer{width: 1900px;height: 700px;padding: 0 350px;position: relative;margin: auto;z-index: 10;margin-top: 100px;
background: linear-gradient(rgba(38,36,93,0) 40%,rgba(38,36,93,0) 100%);overflow: unset}

.project_gradient{width: 300px;height: 100%;position: absolute;top: 0;z-index: 40;}
.project_gradient_left{left: 0%;background: linear-gradient(to right,  rgba(38,36,93,1) 40%,rgba(38,36,93,0) 100%)}
.project_gradient_right{right: 0%;background: linear-gradient(to left,  rgba(38,36,93,1) 40%,rgba(38,36,93,0) 100%)}

.project_slideWrap{width: 500%;height: 100%;display: flex;align-items: center}
.project_slide{max-width: 1200px;height: 100%;transition: all .5s ease;box-shadow: 0 13px 21px rgba(17, 26, 31, 0.5);}
/* .project_slide:nth-child(1),.project_slide:nth-child(3){opacity: .5;transform: scale(.9)} */

.project_slideWrap .project_slide{opacity: .5;transform: scale(.9)}
.project_slideWrap .swiper-slide-active{opacity: 1;transform: scale(1)}

.project-pagination{color: #fff;font-size: 32px;bottom: 102%}
.project-pagination span{display: inline-block}

.project_next,.project_prev{background-image: none;height: 100%;top: 0;width: 350px;margin-top: 0;z-index: 100;}
.project_next{right: 0px}
.project_prev{left: 0px}
.project_M_next,.project_M_prev{display: none}

.swiper-container-horizontal>.swiper-scrollbar{bottom: -35px}
.project-scrollbar{background: #838fc2;}
.project-scrollbar .swiper-scrollbar-drag{background: #fff}

.project_protfolio .project_right_box{background: #838fc2}
.project_bibigo .project_right_box{background: #6fae43}
.project_dehan .project_right_box{background: #f8b218}
.project_emart .project_right_box{background: #f8b218}
.project_identity .project_right_box{background: #cf4f54}
.project_mobile .project_right_box{background: #3a82c3}

.project_float_box{float: left;width: 600px;height: 100%}
.project_right_box{padding-left: 150px;padding-top: 150px;color: #fff}
.project_right_box h2{font-size: 30px;line-height: 32px}
.project_tit{font-size: 16px;padding: 16px 0}
.project_mundan{font-size:14px;padding-bottom : 16px;width: 300px;line-height: 20px}
.project_linkBtn span a{padding: 10px}
.project_linkBtn span{border: 1px solid #fff;display: inline-block}
.project_linkBtn span:nth-child(1){margin-right: 16px}

.project_pointer{position: relative;width: 1200px;height: 5px;margin: 80px auto;background: #000}
.project_pointer li{position: absolute;left: 0;top: 0;width: 200px;height: 100%;background: #fff;}

.project_bg_line{position: absolute;z-index: 5;transform: translateX(-50%);opacity: .4;}
.project_bg_line_1{left: 30%;top: 20%;}

@media only screen and (max-width:480px){
    .project_ground{width: 100%;left: 50%}
    .project_ground div:not(:last-child){background-size: contain}
    #project_tit{height: 50vh;overflow: hidden;background: #26245d}
    #project_tit::before{content: '';position: fixed;width: 100%;height: 30vh;background-image: url(../protfolio/img/project_top_bg_system.png),url(../protfolio/img/project_top_bg_gradient.png);
        background-repeat: no-repeat,no-repeat;background-position: center top,center top;overflow: hidden;background-size: cover,140% 100%}    
    .project_cube_1{width: 75px;height: 40px;left: 70%;}
    .project_cube_2{width: 50px;height: 35px;left: 10%}
    .project_cube_3{width: 20px;height: 20px;left: 40%;top: 80%;}
    .project_cube_4{width: 50px;height: 42px;left: 70%;}
    /* .porject_me{left: 0;width: 100%;height: 150px;background-size: 40% 22%;background-position: 108% 30%} */
    #project_sec{height: 100vh;height: calc(var(--Mvh, 1vh) * 100)}
    .porject_me{display: none}
    .project_gradient_wrapper{max-width: 100%;height: 100%}
    .project_slideContainer{width: 100%;margin-top: 30%;padding: 0 7%;height: 80%}
    .project_gradient{width: 10%;}
    .project_slide{max-width: 90%}
    .project_float_box{width: 100%;height: 50%}
    .project_float_box img{width: 100%;}
    .project_next, .project_prev{width: 10%;}
    .project_left_box{position: relative;overflow: hidden;}
    .project_left_box img{background-size: contain;position: absolute;transform: translateY(-50%);top: 50%}
    .project_right_box{padding: 5%;font-size: 12px}
    .project_right_box h2{font-size: 18px;line-height: 20px}
    .project_right_box p{font-size: 3vw}
    .project_tit{padding: 8px 0}
    .project_mundan{width: 100%;line-height: unset;padding-bottom: 8px}
    .project_linkBtn span a{padding: 6px}
    .project_M_next,.project_M_prev{display: block;top: -5%;z-index: 100;width: 30%;background-size: unset;}
    .project_M_next{right: 7%;background-position: top right;background-image: url(../protfolio/img/project_M_right_arrow.png)}
    .project_M_prev{left: 7%;background-position: top left;background-image: url(../protfolio/img/project_M_left_arrow.png)}
}

/*work page*/
.work_slideContainer{overflow: unset;}

#work_tit{width: 100%;height: 67vh;position: relative;background-image: url(../protfolio/img/work_top_bg_system.png),url(../protfolio/img/work_top_bg_gradient.png);
background-repeat: no-repeat,no-repeat;background-position: center top,center top;background-attachment: fixed;overflow: hidden;background-size: contain,100% 67%}

.work_ground{width: 1200px;height: 100%;position: relative;}

.work_move_ani{position: absolute;z-index: 100;transform: scale(0);opacity: 0;}

.work_move_ani_1{left: 70%;top: 40%;animation: work_move_ani_1 10s ease infinite}
.work_move_ani_2{left: 300%;top: 10%;animation: work_move_ani_2 18s ease infinite;animation-delay: 5s}
.work_move_ani_3{left: 0%;top: 80%;animation: work_move_ani_3 12s ease infinite;animation-delay: 2s}
.work_move_ani_4{left: 200%;top: 50%;animation: work_move_ani_4 18s ease infinite;animation-delay: 3s}
.work_move_ani_5{left: 200%;top: 50%;animation: work_move_ani_5 16s ease infinite}
.work_move_ani_6{left: 100%;top: 30%;animation: work_move_ani_6 10s ease infinite;animation-delay: 3s}

@keyframes work_move_ani_1{
    0%{transform: scale(1);opacity: 1;}
    5%{transform: scale(2);}
    10%{left: 70%;top: 40%;transform: scale(1);}
    100%{left: -130%;top: 80%;transform: scale(1);opacity: 1;}
}
@keyframes work_move_ani_2{
    0%{transform: scale(.5);opacity: 1;}
    5%{transform: scale(1);}
    10%{left: 300%;top: 10%;transform: scale(.5);}
    100%{left: -70%;top: 30%;transform: scale(.5);opacity: 1;}
}
@keyframes work_move_ani_3{
    0%{transform: scale(1.3);opacity: 1;}
    5%{transform: scale(2.6);}
    10%{left: 0%;top: 80%;transform: scale(1.3);}
    100%{left: -60%;top: 60%;transform: scale(1.3);opacity: 1;}
}
@keyframes work_move_ani_4{
    0%{transform: scale(1);opacity: 1;}
    5%{transform: scale(2);}
    10%{left: 200%;top: 50%;transform: scale(1);}
    100%{left: -70%;top: 30%;transform: scale(1);opacity: 1;}
}
@keyframes work_move_ani_5{
    0%{transform: scale(.3);opacity: 1;}
    5%{transform: scale(.6);}
    10%{left: 200%;top: 50%;transform: scale(.3);}
    100%{left: -70%;top: 60%;transform: scale(.3);opacity: 1;}
}
@keyframes work_move_ani_6{
    0%{transform: scale(.8);opacity: 1;}
    5%{transform: scale(1.6);}
    10%{left: 100%;top: 30%;transform: scale(.8);}
    100%{left: -70%;top: 20%;transform: scale(.8);opacity: 1;}
}

.work_polygon{overflow: unset;animation: work_ani_polygon .8s ease infinite}

@keyframes work_ani_polygon{
    0%{margin-top: 0px}
    70%{margin-top: -60px}
    100%{margin-top: 0px}
}

#work_polygon_ani_2{transform-origin: 100% 22%;animation: work_ani_left .8s ease infinite}
#work_polygon_ani_3{transform-origin: 0 22%;animation: work_ani_right .8s ease infinite}

@keyframes work_ani_left{
    0%{transform: rotate(-0deg)}
    70%{transform: rotate(-160deg)}
    100%{transform: rotate(-0deg)}
}
@keyframes work_ani_right{
    0%{transform: rotate(0deg)}
    70%{transform: rotate(160deg)}
    100%{transform: rotate(0deg)}
}

.work_me{position: absolute;bottom:0;z-index: 100;width:100%;height: 400px;background: url(../protfolio/img/work_top_me.png)no-repeat 77% 101%;background-attachment: fixed;}

#work_sec{width: 100%;height: 100vh;position: relative;left: 0;top: 0;background: #43bdaa;overflow: hidden;}

.work_mouseevent{position: absolute;z-index: 999;width: 100%;height: 100%;display: none}
.work_mouseevent.on{display: block}

.work_scrollTop{position: absolute;z-index: 7777;width: 100px;height: 100px;border-radius: 50px;background: #169568 url(../protfolio/img/work_top_arrow.png);transition: all .5s ease;
transform: translate(-50%,-50%);left: 50%;top: 0;cursor: pointer;background-size: 60%;background-position: center bottom;background-repeat: no-repeat;opacity: 0;}
.work_scrollTop.on{opacity: 1;}

.work_slideContainer{width: 20%;height: 100%;position: relative;left: 0;top: 0;margin: 0}
.work_slideWrap{width: 2100%;height: 100%;display: flex;margin-left: -300px}
.work_slide{width: 300px;border-right: 1px solid #169568;height: 100%;padding: 0 10px;display: flex;flex-direction: column;justify-content: space-between;padding-bottom: 60px;}

.work_inNumber{font-size: 40px;font-weight: bold;max-width: 280px;width: 100%;height: 320px;margin-top: 100px;color: #fff}
.work_inTit{max-width: 280px;width: 100%;clear: both;margin-top: 160px}
.work_inTit span{color: #fff}
.work_inTit h3{margin:10px 0}
.work_inTit p{color: #ffdd17}
.work_inMockup{display: inline-block;vertical-align: bottom;width: 100%;height: 178px;margin-top: 10px;box-shadow: 0 5px 8px rgba(17, 26, 31, 0.5);}
.work_inMockup a{height: 100%}
.work_inMockup img{width: 100%;vertical-align: bottom;height: 100%}

@media only screen and (min-width:481px){
    .work_slide:nth-child(2){width: 800px;}
    .work_slide:nth-child(2) .work_inNumber{height: 150px}
    .work_slide:nth-child(2) .work_inTit{margin-top:0}
    .work_slide:nth-child(2) .work_inMockup{height: 495px}    
}

@media only screen and (max-width:480px){
    .work_mouseevent.on{display: none}
    .work_ground{width: 100%;left: 50%}
    .work_ground div:not(:last-child){background-size: contain}
    #work_tit{height: 30vh;height: calc(var(--Mvh, 1vh) * 30);overflow: hidden;background: #43bdaa}
    #work_tit::before{content: '';position: fixed;width: 100%;height: 30vh;background-image: url(../protfolio/img/work_top_bg_system.png),url(../protfolio/img/work_top_bg_gradient.png);
        background-repeat: no-repeat,no-repeat;background-position: center top,center top;overflow: hidden;background-size: cover,140% 100%}    

    /* .work_me{left: 0;width: 100%;height: 150px;background-size: 40% 22%;background-position: 108% 30%} */
    .work_me{display: none}
    @keyframes work_move_ani_1{
        0%{transform: scale(.8);opacity: 1;}
        5%{transform: scale(1.3);}
        10%{left: 70%;top: 40%;transform: scale(.8);}
        100%{left: -130%;top: 80%;transform: scale(.8);opacity: 1;}
    }
    @keyframes work_move_ani_3{
        0%{transform: scale(1);opacity: 1;}
        5%{transform: scale(1.3);}
        10%{left: 0%;top: 80%;transform: scale(1);}
        100%{left: -60%;top: 60%;transform: scale(1);opacity: 1;}
    }
    #work_sec{height: calc(var(--Mvh, 1vh) * 100)}
    .work_slideContainer{width: 80%}
    .work_slideWrap{width: 100%;margin-left: -100%}
    .work_slide{width: 100%;padding-bottom: 10%}
    .work_inNumber{margin-top: 20%;font-size: 32px;height: unset}
    .work_inTit{margin-top: 10%}
    .work_inTit p{font-size: 4vw}
    .work_inMockup{height: 145px}

}

/*graphic page*/

#graphic_tit{width: 100%;height: 67vh;position: relative;background-image: url(../protfolio/img/graphic_top_bg_system.png),url(../protfolio/img/graphic_top_bg_gradient.png);
background-repeat: no-repeat,no-repeat;background-position: center top,center top;background-attachment: fixed;overflow: hidden;background-size: contain,100% 67%}

.graphic_ground{width: 1200px;height: 100%;position: relative;}

.graphic_move_ani{position: absolute;}

.graphic_move_ani_1{left: 30%;top: 15%}
.graphic_move_ani_2{left: 80%;top: 20%}
.graphic_move_ani_3{left: 20%;top: 30%}
.graphic_move_ani_4{left: 50%;top: 35%}
.graphic_move_ani_5{left: 70%;top: 41%}
.graphic_move_ani_6{left: 60%;top: 73%}
.graphic_move_ani_7{left: 20%;top: 59%}
.graphic_move_ani_8{left: 80%;top: 56%}
.graphic_move_ani_9{left: 100%;top: 64%}
.graphic_move_ani_10{left: 30%;top: 50%}
.graphic_move_ani_11{left: 50%;top: 66%}

.graphic_polygon{overflow: unset}

.graphic_polygon polygon{
transform: scale(0);transform-origin: center center}

.graphic_me{position: absolute;bottom:0;z-index: 100;width:100%;height: 400px;background: url(../protfolio/img/graphic_top_me.png)no-repeat 77% 101%;background-attachment: fixed;}

#graphic_sec{position: relative;left: 0;top: 0;background: #f05971;width: 100%;height: 100vh;overflow: hidden;}

.graphic_mouseevent{position: absolute;z-index: 8888;width: 100%;height: 100%;display: none}
.graphic_mouseevent.on{display: block}

.graphic_scrollTop{position: absolute;z-index: 7777;width: 100px;height: 100px;border-radius: 50px;background: #f9ac6e url(../protfolio/img/work_top_arrow.png);transition: all .5s ease;
transform: translate(-50%,-50%);left: 50%;top: 0;cursor: pointer;background-size: 60%;background-position: center bottom;background-repeat: no-repeat;opacity: 0;}
.graphic_scrollTop.on{opacity: 1;}

.graphic_mouse{position: absolute;left: -160px;bottom: 50%;transform: translateY(-50%);z-index: 999;}
.graphic_mouse span:nth-child(1){width: 42px;height: 75px;background:url(../protfolio/img/graphic_mouse.png)no-repeat}
.graphic_mouse_move{position: absolute;transform: translateY(-50%);top: 50%;width: 16px;height: 28px;background: url(../protfolio/img/graphic_mouse_right.png)no-repeat;background-size: contain;animation: GPmouse 1.8s linear infinite;opacity: 0;}
.graphic_mouse_move:nth-child(3){animation-delay: .6s}
.graphic_mouse_move:nth-child(4){animation-delay: 1.2s}

@keyframes GPmouse{
    0%{opacity: 0;left: 100%}
    20%{opacity: 1;}
    80%{opacity: 1;}
    100%{opacity: 0;left: 200%}
}

.graphic_container{position: relative;height: 100%;width: 100%;display: flex;align-items: center;margin: auto;z-index: 100;}

.graphic_wrapper{display: flex;position: relative;z-index: 999}

.graphic_wrapper img{vertical-align: top}

.graphic_slide{position: relative;cursor: pointer;display: flex;align-items: center;box-shadow: 0 13px 21px rgba(183, 30, 72, 0.5);max-height: 680px;overflow: hidden;}

.graphic_img_hover{width: 100%;overflow: hidden;transition: all .2s ease;display: flex;align-items: center;}

.graphic_slide span{position: absolute;z-index: 10;color: #f05971;text-shadow: 1px 1px 5px #fff;font-size: 32px;font-weight: bold;text-align: center;transform: translate(-50%,-100%);left: 50%;white-space: nowrap;display: none}

.graphic_slide span.on{display: block}


.swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
width: 480%;height: 100%;z-index: 10;transform: translateX(-43%)}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
background: #f05971}

.graphic_bg_line{position: absolute;z-index: 5;transform: translateX(-50%);left: 0;top: 40%;z-index: 10;
background-attachment: fixed}

.parallax-bg {position: absolute;height: 100%;
-webkit-background-size: cover;background-size: cover;
background-position: right bottom;}

.graphic_bgLine_1{left: 10%;top: 10%;width: 140%;background: url(../protfolio/img/graphic_bottom_line.png)no-repeat;}
.graphic_bgLine_2{left: 30%;top: 20%;width: 130%;background: url(../protfolio/img/graphic_bottom_line_1.png)no-repeat;}
.graphic_bgLine_3{left: 60%;top: 60%;width: 37%;background: url(../protfolio/img/graphic_bottom_line_2.png)no-repeat;}
.graphic_bgLine_4{left: 100%;top: 40%;width: 26%;background: url(../protfolio/img/graphic_bottom_line_3.png)no-repeat;}
.graphic_bgLine_5{left: 110%;top: 60%;width: 30%;background: url(../protfolio/img/graphic_bottom_cute_1.png)no-repeat;z-index: 50;}
.graphic_bgLine_6{left: 20%;top: 10%;width: 30%;background: url(../protfolio/img/graphic_bottom_cute_2.png)no-repeat;}
.graphic_bgLine_7{left: 82%;top: 77%;width: 30%;background: url(../protfolio/img/graphic_bottom_cute_3.png)no-repeat;}
.graphic_bgLine_8{left: 70%;top: 80%;width: 30%;background: url(../protfolio/img/graphic_bottom_cute_4.png)no-repeat;}
.graphic_bgLine_9{left: 90%;top: 10%;width: 30%;background: url(../protfolio/img/graphic_bottom_cute_5.png)no-repeat;}
.graphic_bgLine_10{left: 180%;top: 70%;width: 30%;background: url(../protfolio/img/graphic_bottom_cute_2.png)no-repeat;}
.graphic_bgLine_11{left: -10%;top: 50%;width: 30%;background: url(../protfolio/img/graphic_bottom_cute_5.png)no-repeat;}

@media only screen and (max-width:480px){
    .graphic_mouseevent.on{display: none}
    .graphic_ground{width: 100%;left: 50%}
    .graphic_ground div:not(:last-child){background-size: contain}
    #graphic_tit{height: 30vh;height: calc(var(--Mvh, 1vh) * 30);overflow: hidden;background: #f05971}
    #graphic_tit::before{content: '';position: fixed;width: 100%;height: 30vh;background-image: url(../protfolio/img/graphic_top_bg_system.png),url(../protfolio/img/graphic_top_bg_gradient.png);
        background-repeat: no-repeat,no-repeat;background-position: center top,center top;overflow: hidden;background-size: cover,140% 100%}    
    /* .graphic_me{left: 0;width: 100%;height: 150px;background-size: 41% 22%;background-position: 108% 30%} */
    .graphic_me{display: none}
    #graphic_sec{height: calc(var(--Mvh, 1vh) * 100)}
    .graphic_move_ani_09,.graphic_move_ani_10,.graphic_move_ani_11{display: none}
    .parallax-bg{background-size: contain}
    .graphic_slide{max-height: 280px}
    .graphic_wrapper{width: 100%;}
    .graphic_img_hover img{width: 100%;}
    .graphic_bgLine_8{left: 100%;top: 70%}
    .graphic_mouse{bottom: -50%;left: 80px}
    .graphic_mouse span:nth-child(1){width: 30px;background-size: contain;background-position: center center}
    .graphic_mouse span{width: .6em;}
    .graphic_mouse_move{top: 60%}
    
}
/*about me page*/
.aboutMe_body{background: #ce99c5}

#aboutMe_tit{width: 100%;height: 67vh;position: relative;background-image: url(../protfolio/img/aboutMe_bg_system.png),url(../protfolio/img/aboutMe_bg_gradient.png);
background-repeat: no-repeat,no-repeat;background-position: center top,center top;background-attachment: fixed;overflow: hidden;background-size: contain,100% 67%}

.aboutMe_ground{width: 1200px;height: 100%;position: relative;}
    
.aboutMe_me{position: absolute;bottom:0;z-index: 100;width:100%;height: 400px;background: url(../protfolio/img/aboutMe_top_me.png)no-repeat 77% 101%;background-attachment: fixed;}

.aboutMe_polygon{position: absolute;transform: translate(-50%,-50%);left: 50%;top: 100%;opacity: .5;}

.aboutMe_polygon_1,.aboutMe_polygon_3{animation: aboutMe_ani_1 20s linear infinite}
.aboutMe_polygon_2{animation: aboutMe_ani_2 20s linear infinite}

@keyframes aboutMe_ani_1{
    0%{transform: translate(-50%,-50%) rotate(0deg)}
    100%{transform: translate(-50%,-50%) rotate(360deg)}
}
@keyframes aboutMe_ani_2{
    0%{transform: translate(-50%,-50%) rotate(0deg)}
    100%{transform: translate(-50%,-50%) rotate(-360deg)}
}

#aboutMe_sec{position: relative;left: 0;top: 0;background: #ce99c5;width: 100%;overflow: hidden;}

#aboutMe_insec_1{height: 122vh}
#aboutMe_insec_2{background: #bb70ad;height: 122vh;overflow: hidden;}
#aboutMe_insec_3{height: 122vh}
/*section*/

.aboutMe_insec_tit{padding-top: 16%;color: #fff;font-size: 32px}
.aboutMe_sec_boxLayout{position: absolute;top:0;width: 26%;height: 100%;background: url(../protfolio/img/aboutMe_box_layout.png)no-repeat;background-size: contain;}
.aboutMe_insec{position: relative}
.aboutMe_secTop_bg{position: absolute;width: 100%;height: 60%;bottom:0;left: 0;z-index: 100;}
.aboutMe_secTop_right{right: 0;left: unset}
.aboutMe_secTop_bottom{bottom: 0;top: unset;transform: translateY(0);}
.aboutMe_secTop_bg img{vertical-align: bottom;width: 100%;height: 100%;bottom: 0}
.aboutMe_inwrap{width: 1200px;height: 100%;margin: auto;position: relative;}
/*공용*/

.aboutMe_myimg{position: absolute;right: 0%;bottom: 20%;width: 65%;}
.aboutMe_myimg img{width: 100%;}
.aboutMe_aboutList{padding-top: 10%;font-size: 16px}
.aboutMe_aboutList li{position: relative;padding-top: 24px;color: #fff}
.aboutMe_aboutList span{position: absolute;left: -16px;top: 4px;font-size: 14px;color: #ffdd17}
/*sec1*/

#aboutMe_insec_2 .aboutMe_secTop_bg{z-index: 0;}
.aboutMe_insec_tit_2{padding-top: 10%}

/* .aboutMe_ani_page{width: 150%;height: 100%;position: absolute;left: -50%;top: -65%;transition: all .5s ease;border: 1px solid #000;transform: rotate(22deg);transform-origin: left center;background: #bb70ad;z-index: 1000;}
.aboutMe_ani_page.on{transform: rotate(-12deg)} */

.aboutMe_skillList{padding-top: 4%;font-size: 16px}
.aboutMe_skillList li{position: relative;padding-top: 24px;color: #fff}
.aboutMe_skillList li:nth-child(2){margin-top: 16%}
.aboutMe_skillList span{position: absolute;left: -16px;top: 4px;font-size: 14px;color: #ffdd17}
.aboutMe_skillFigure{width: 80%;height: 80%;position: absolute;left: 30%;top: 10%}

.progress{width:100%;height: 20%;margin: 60px auto;}
.progress-radial, .progress-radial * {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.progress-radial {float: left;margin-right: 6%;position: relative;width: 16%;height:16%;border-radius: 50%;cursor: pointer;background: #bb70ad}
.progress-radial::before{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 80%;height: 80%;border-radius: 50%;background: #bb70ad}
.progress-radial:last-child{margin-right: 0;}
.progress-radial .overlay {position: absolute;width: 70%;height: 70%;background-color: #f0f0f0;border-radius: 50%;font-size: 14px;top:50%;left:50%;
-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.progress-radial .overlay p{position: absolute;text-align: center;width: 100%;top:60%;transform: translateY(-50%);margin-top:3%;opacity: 0;transition: all .2s ease}
.progress-radial .overlay p span{font-size: 24px}
.progress-radial .overlay p.on{top: 50%;opacity: 1;}
.progress-75::before {background-image: -webkit-linear-gradient(90deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);background-image: linear-gradient(0deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);}
.progress-77::before {background-image: -webkit-linear-gradient(90deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);background-image: linear-gradient(10deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);}
.progress-85::before {background-image: -webkit-linear-gradient(54deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);background-image: linear-gradient(36deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);}
.progress-87::before {background-image: -webkit-linear-gradient(54deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);background-image: linear-gradient(40deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);}
.progress-90::before {background-image: -webkit-linear-gradient(36deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);background-image: linear-gradient(54deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);}
.progress-93::before {background-image: -webkit-linear-gradient(36deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);background-image: linear-gradient(62deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);}
.progress-95::before {background-image: -webkit-linear-gradient(36deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);background-image: linear-gradient(68deg, #ce99c5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ce99c5 50%, #f0f0f0 50%, #f0f0f0);}
/*sec2*/

.aboutMe_keywordList{position: absolute;width: 20%;z-index: 120;}
.aboutMe_keywordList li{margin-top: 90px;margin-left: 8%;color: #fff;cursor: pointer;font-size:18px;}
.aboutMe_keyword_cube{position: absolute;top: 250px}
.aboutMe_keyword_cube li img{animation: AMSCI 2s ease-in-out infinite}

@keyframes AMSCI {
    0%{margin-top: 0}
    50%{margin-top: 20px}
    100%{margin-top: 0}
}

.aboutMe_container{width: 100%;height: 50%;position: absolute;right: 0;top: 25%;overflow: hidden;z-index: 300;display: flex}
.aboutMe_slide{height: 100%;font-size: 16px;color: #fff;flex: 1;border: 1px solid #fff;position: relative}
.aboutMe_slide:nth-child(1){background: url(../protfolio/img/aboutMe_list_img.jpg) #fff;background-size: contain;background-position: center center;background-repeat: no-repeat}
.aboutMe_slide span{font-size: 24px;color: #ffdd17;opacity: 0;transition: all .5s ease}
.aboutMe_slide p{padding-top: 2%;opacity: 0;transition: all .5s ease}
.aboutMe_inSlide{position: absolute;width:100%;height:100%;left: 0;top: 0;background: rgba(0,0,0,.7);padding: 5%;opacity: 0;transition: all .5s ease;}
.aboutMe_slide:hover .aboutMe_inSlide{opacity: 1;}
.aboutMe_slide:hover span{opacity: 1;}
.aboutMe_slide:hover p{opacity: 1;}
/*sec3*/

@media only screen and (max-width:480px){
    .aboutMe_ground{width: 100%;left: 50%}
    .aboutMe_ground div:not(:last-child){background-size: contain}
    #aboutMe_tit{height: 30vh;height: calc(var(--Mvh, 1vh) * 30);overflow: hidden;background: #bb70ad}
    #aboutMe_tit::before{content: '';position: fixed;width: 100%;height: 30vh;background-image: url(../protfolio/img/aboutMe_bg_system.png),url(../protfolio/img/aboutMe_bg_gradient.png);
        background-repeat: no-repeat,no-repeat;background-position: center top,center top;overflow: hidden;background-size: cover,140% 100%}    
    /* .aboutMe_me{left: 0;width: 100%;height: 150px;background-size: 48% 22%;background-position: 120% 30%} */
    .aboutMe_me{display: none}
    .aboutMe_polygon_1{width: 100%;}
    .aboutMe_polygon_3{width: 20%;}
    .aboutMe_polygon img{width: 100%;}
    /* #aboutMe_sec{height: calc(var(--Mvh, 1vh) * 100);} */
    #aboutMe_insec_1{height: 760px;background: #bb70ad}
    #aboutMe_insec_2{height: 500px;background: #ce99c5}
    #aboutMe_insec_3{height: 700px;background: #bb70ad}
    .aboutMe_sec_boxLayout{width: 40%;background-position: bottom}
    .aboutMe_inwrap{width: 100%;padding-left: 8%;}
    .aboutMe_secTop_bg {height: 150px}
    .aboutMe_insec_tit {padding-top: 20%;font-size: 16px}
    .aboutMe_aboutList{padding-top: 2%}
    .aboutMe_myimg{width: 80%;right: -10%;bottom: 2%}
    .aboutMe_aboutList{font-size: 4vw}
    .aboutMe_skillList{font-size: 4vw}
    .aboutMe_skillFigure{left: 10%;top: 20%;height: 460px}
    .aboutMe_skillList li:nth-child(2){margin-top: 36%}
    .progress{margin-top: 90px;}
    .progress-radial{margin-right: 10%;z-index: 10;width: 44px;height: 44px;}
    .progress-radial .overlay{z-index: 20;width: 50%;height: 50%}
    .progress-radial .overlay p{transform: translate(-50%,-50%);top: 45px;opacity: 1;font-size: 4vw;left: 50%;width: 100px;color: #fff}
    .progress-radial .overlay p span{padding-top: 30px;font-size: 4vw}
    .aboutMe_keywordList{width: 100%;display: flex;left: 0;text-align: center;}
    .aboutMe_keywordList li{height: 70px;margin-top: 0;margin-left: 0;flex: 1;background: #fff;color: #bb70ad;font-size: 4vw;position: relative;}
    .aboutMe_keywordList li span{position: absolute;transform: translate(-50%,-50%);left: 50%;top: 50%;width: 100%;padding: 10px}
    .aboutMe_container{width: 100%;height: 450px;bottom: 50px}
    .aboutMe_slide{padding: 0 2%;width: 100%;}
    .aboutMe_slide span{font-size: 5vw}
    .aboutMe_slide p{font-size: 4vw}
    .aboutMe_keyword_cube{width: 30px;top: 135px;z-index: 120;left: 0%;margin-left: 10%}
    .aboutMe_keyword_cube img{width: 100%;}
    .aboutMe_wrapper{width: 300%;height: 100%;position: relative;left: 0;display: flex}

}