@import "https://fonts.googleapis.com/css2?family=Bungee&family=Noto+Sans+KR:wght@300&display=swap";@import "https://fonts.googleapis.com/css2?family=Antic+Slab&display=swap";*{margin:0;padding:0;list-style:none;font-family:'Noto Sans KR',sans-serif;font-size:15px;user-select:none}a{text-decoration:none;color:inherit}.wrap{width:100%;min-width:1200px;overflow:hidden;position:relative;color:#ffffff;background:#1a73a0 url(img/bot_bg.png) no-repeat bottom / contain;padding-bottom:400px}.header{width:100%;height:80px;line-height:80px;position:absolute;top:50px;z-index:99}.menu{height:100%;float:right;margin-right:200px;font-size:0}.menu_act{position:fixed;bottom:calc(3% + 100px);right:4%;float:none;z-index:99;text-align:right}.menu > li{display:inline-block;font-size:15px;padding:0 20px}.menu_act > li{display:block;padding:0}.menu > li:hover > a{color:#be3401;font-weight:600}.menu_act > li:hover > a{color:#25272b;font-weight:600}.menu > li > a{display:block;width:100%;height:100%}.menu_act > li > a{display:block;width:80px;height:50px;line-height:50px}.sec_title{font-size:50px;font-weight:600;width:80%;margin:0 auto 50px;text-transform:uppercase;font-family:'Bungee',cursive;transform:translateY(50px);opacity:0;transition:all .8s}.sec_title_act{transform:translateY(0);opacity:1}.section{width:100%;margin-bottom:50px;position:relative}#top{height:100vh;min-height:800px;background:#fbb383}#top > .top_outer{width:1200px;height:400px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9}#top > .top_outer > img{position:absolute;top:0;left:0;opacity:0;transform:translateX(-100px);animation:outer_img 2s 1.5s forwards}@keyframes outer_img{0%{opacity:0;transform:translateX(-100px)}100%{opacity:1;transform:translateX(0px)}}#top .text{position:absolute;width:100%;top:20%;left:50%;text-align:center;transform:translateX(-50%)}#top .title{height:90px;line-height:90px;font-family:'Bungee',cursive;font-size:100px}#top .text > .body:nth-child(2){font-size:35px;font-weight:600;margin:120px 0 10px}#top .text > .body{color:#25272b;transform:translateY(100px);opacity:0;animation:body_animate 1s 2s forwards;font-size:20px}@keyframes body_animate{0%{transform:translateY(100px);opacity:0}100%{transform:translateY(0px);opacity:1}}.down_btn{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 9px;border:2px solid #ffffff;border-radius:20px;text-align:center;cursor:pointer}.bot_cursor{line-height:12px}.bgimg_box{position:absolute;top:0;left:0;right:0;bottom:0}.bg_top{opacity:0;transform:translateY(-100px);animation:bg_T_animate 1s 1s forwards;position:relative;z-index:9}.bg_top img{width:100%}.bg_bot{transform:translateY(550px);animation:bg_B_trans 2s 1s forwards;width:100%;height:100%;background:url(img/sea_02.png) no-repeat top / cover;position:absolute;bottom:0}@keyframes bg_T_animate{0%{opacity:0;transform:translateY(-100px)}100%{opacity:1;transform:translateY(0px)}}@keyframes bg_B_trans{0%{transform:translateY(550px)}100%{transform:translateY(20%)}}.outer{width:70%;overflow:hidden;margin:0 auto 20px}#skills > .text,#portfolios > .text,#contact > .text{width:80%;margin:80px auto 0;transform:translateX(-100px);opacity:0;transition:all .5s}.text_act{transform:translateX(0)!important;opacity:1!important}.skills_sec{width:calc(100% / 2 - 100px);margin-right:70px;height:100px;float:left;padding:10px;transform:translateY(50px);transition:all .5s;opacity:0}.skills_sec:nth-child(2n){margin:0}.skills_sec > .icon{width:90px;height:90px;border-radius:50%;float:left;position:relative}.skills_sec > .icon > img{width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.skills_sec > .text_box{float:right;width:calc(100% - 100px)}.line_box{width:100%;height:40px;line-height:45px}.line_box > .line{width:80%;height:10px;background:#3094c6;border-radius:2px;margin-top:17px;float:left;position:relative;overflow:hidden}.line > div{width:0;height:100%;position:absolute;top:0;left:0;background:#ffffff}.line_box > .percent{width:15%;height:100%;float:right;font-size:45px;font-weight:600;text-align:right}.skills_sec .title{font-size:20px;font-weight:600}#skills .summary{font-size:18px;font-weight:600;margin-bottom:15px}#portfolios .container{width:calc((100% - 20px)/ 2);height:600px;float:left;position:relative;overflow:hidden;border:1px solid #ffffff;box-sizing:border-box;transform:translateY(50px);transition:all .5s;opacity:0}.sec_motion{transform:translateY(0px)!important;opacity:1!important}#portfolios .container::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0);transition:all .5s}#portfolios .container > img{transition:all .5s;height:100%;position:absolute;left:50%;transform:translateX(-45%)}#portfolios .container:hover > img{transform:translateX(-45%) scale(1.2);opacity:.3}#portfolios .container:nth-child(2n){margin:0 0 0 20px}#portfolios .container:hover > .pf_inner{opacity:1}#portfolios .container:hover::after{background:linear-gradient(to bottom,rgba(255,255,255,0.8),transparent)}.pf_inner{opacity:0;width:380px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .5s;z-index:9;color:#25272b;text-align:center}.pf_inner > .title{text-align:center;font-size:40px;font-weight:600;color:#be3401}.pf_inner > .color{text-align:left;width:100%;overflow:hidden;margin:5px 0 20px}.pf_inner > .color > .box{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid #000000}.pf_inner > .mini_title{text-align:center;font-weight:600;font-size:20px;margin:5px 0 20px}.pf_inner > .time{font-size:17px;font-weight:600;text-align:left}#box_A1{background-color:#545a74}#box_A2{background-color:#37363c}#box_A3{background-color:#ff6749}#box_B1{background-color:#b2aea6}#box_B2{background-color:#007042}#box_B3{background-color:#2c2a29}.pf_inner > .color > .box:nth-child(3){margin:0 5px}.color > .mini_title{font-weight:600;float:left;line-height:17px;margin-right:20px;font-size:17px}.pf_inner > .body{font-size:16px;text-align:left;overflow:hidden;margin-bottom:10px;padding-bottom:20px;font-weight:600;text-align:justify}.pf_inner > .body > span{color:#be3401;font-weight:900}.pf_inner > .view_btn,.view_btn_steam{width:80px;height:30px;line-height:30px;text-align:center;border:2px solid;position:relative;margin:0 auto}.view_btn_steam{display:inline-block}.pf_inner > .view_btn::after,.view_btn_steam::after{content:"";display:block;width:0;height:100%;background:#25272b;position:absolute;top:0;transition:all .5s}.pf_inner > .view_btn:hover::after,.view_btn_steam:hover::after{width:100%}.pf_inner > .view_btn:hover > a,.view_btn_steam:hover > a{color:#ffffff}.view_btn > a,.view_btn_steam > a{display:block;width:100%;height:100%;position:relative;z-index:9;font-size:17px}#about_me .text{font-size:18px;background:rgb(26 115 160 / 50%);width:850px;margin:0 auto}#about_me .title{width:100%;text-align:center;margin-bottom:20px}#about_me .title > span:first-child{font-size:40px;margin-right:10px}#about_me .title > span:nth-child(2){font-size:20px}.about_me_img{width:100%;height:300px;background:url(img/about_me.jpg) no-repeat;background-attachment:fixed;margin-bottom:20px;border:1px solid #ffffff}.about_box{opacity:0;transform:translateY(100px);transition:all .5s}#contact > .text{font-size:17px}.contact_sns{width:calc((100% - 40px)/ 3);float:left;text-align:center;opacity:0;transform:translateY(100px);transition:all .5s}.contact_sns:nth-child(2){margin:0 20px}.contact_sns .icon_box{width:200px;display:block;margin:0 auto}.contact_sns .text_box{font-size:27px;line-height:45px;font-family:'Antic Slab',serif;margin-top:20px}.top_btn{width:80px;height:80px;position:fixed;right:3%;bottom:3%;background:url(img/contact_img.png) no-repeat center / contain;transform:translateY(-50px);opacity:0;transition:all .5s;cursor:pointer}.top_btn:hover{background:url(img/contact_img_hover.png) no-repeat center / contain}.top_btn_act{transform:translateY(0);opacity:1}.top_btn > a{display:block;width:100%;height:100%}