#mainWrap{width:100%;height:calc(100vh - 80px);overflow-y:auto}#mainWrap #mainHeader{z-index:2;background-color:#353535;width:100%;position:fixed}#mainWrap #mainHeader .main_header_list{display:flex}#mainWrap #mainHeader .main_header_list li{border-right:1px solid #212121;padding:8px 10px;font-size:14px}#mainWrap #mainHeader .main_header_list li a{cursor:pointer;color:rgba(255,255,255,.7);background-color:#353535;height:20px;font-family:Noto Sans,sans-serif;font-size:14px}#mainWrap #mainHeader .main_header_list li a svg{fill:"#fff";vertical-align:bottom;width:14px;height:14px;font-size:12px}#mainWrap #mainHeader .main_header_list li span{padding-left:5px}#mainWrap #mainHeader .main_header_list li:hover a{color:#ffe08c}#mainWrap #mainHeader .main_header_list li.on,#mainWrap #mainHeader .main_header_list li.on a{background-color:#212121!important}.main_comp{max-width:1280px;height:100%;margin:0 auto;padding-top:60px;position:relative}.clr_dd9b25{color:#dd9b25}.clr_03c75a{color:#03c75a}.clr_353535{color:#353535}.clr_fb0{color:#fb0!important}.bgc_dd9b25{background:#dd9b25}.bgc_03c75a{background:#03c75a}.bgc_353535{background:#353535}.bgc_fb0{background:#fb0!important}.bgc_0080ff{background:#0080ff!important}.bgc_A566FF{background-color:#a566ff!important}.bgc_6799FF{background-color:#6799ff!important}.bgc_FF7012{background-color:#ff7012!important}.bgc_35B62C{background-color:#35b62c!important}#project.on .pg_title,#aboutme.on .pg_title,#skills.on .pg_title{top:60px;left:50%;transform:translate(-50%)}.pg_title{text-align:center;border-bottom:0;flex-flow:wrap;justify-content:center;margin-bottom:20px;padding-bottom:20px;font-size:80px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700!important}.pg_title>span{display:block;position:relative;top:0}.pg_title.on>span{animation-name:jumpit;animation-duration:2s;animation-timing-function:ease;animation-iteration-count:1;animation-fill-mode:forwards}.pg_title>span:first-child{color:#ffa7a7}.pg_title>span:nth-child(2){color:#ffc19e}.pg_title>span:nth-child(3){color:#ffe08c}.pg_title>span:nth-child(4){color:#faed7d}.pg_title>span:nth-child(5){color:#cef279}.pg_title>span:nth-child(6){color:#b7f0b1}.pg_title>span:nth-child(7){color:#b2ebf4}.pg_title>span:nth-child(8){color:#b2ccff}.pg_title>span:nth-child(9){color:#b5b2ff}.pg_title.on>span:first-child{color:#ffa7a7;animation-delay:1s}.pg_title.on>span:nth-child(2){color:#ffc19e;animation-delay:1.5s}.pg_title.on>span:nth-child(3){color:#ffe08c;animation-delay:2s}.pg_title.on>span:nth-child(4){color:#faed7d;animation-delay:2.5s}.pg_title.on>span:nth-child(5){color:#cef279;animation-delay:3s}.pg_title.on>span:nth-child(6){color:#b7f0b1;animation-delay:3.5s}.pg_title.on>span:nth-child(7){color:#b2ebf4;animation-delay:4s}.pg_title.on>span:nth-child(8){color:#b2ccff;animation-delay:4.5s}.pg_title.on>span:nth-child(9){color:#b5b2ff;animation-delay:5s}@keyframes jumpit{0%{top:0}50%{top:-20px}to{top:0}}#project .con_wrap{padding:90px 10px 10px}#project .con_wrap .s_menu{justify-content:center;margin-top:10px;margin-bottom:40px;display:flex}#project .con_wrap .s_menu button{color:#fff;cursor:pointer;background:0 0;padding:0 10px;font-size:20px}#project .con_wrap .s_menu button:hover,#project .con_wrap .s_menu button.on{color:#dd9b25}#project .con_wrap .item_wrap{background-color:#fff;border-radius:5px;max-width:1200px;margin:0 auto 40px;padding:20px 10px}#project .con_wrap .item_wrap:last-child{margin-bottom:0}#project .con_wrap .item_wrap .item_list{flex-wrap:wrap;justify-content:flex-start;width:100%;display:flex}#project .con_wrap .item_wrap.dark{background-color:#212121}#project .con_wrap .item_wrap.dark .item_box{border:1px solid #fff;border-radius:5px;width:30%;min-width:350px;max-width:400px;margin:0 auto 50px;padding:0 10px;position:relative}#project .con_wrap .item_wrap.dark .item_box .item_part{width:100%;overflow:hidden}#project .con_wrap .item_wrap.dark .item_box .item_part .part_title{text-align:left;width:100%;padding:15px 0;font-size:25px;font-weight:400;position:relative}#project .con_wrap .item_wrap.dark .item_box .item_part .part_title h3{border-bottom:1px solid #fff;padding-bottom:15px;font-size:30px}#project .con_wrap .item_wrap.dark .item_box .item_part .part_title a{color:#fff;border-radius:5px;margin:10px 0;padding:10px 0;font-size:20px;transition:all .3s;display:block;position:absolute;top:0;right:0}#project .con_wrap .item_wrap.dark .item_box .item_part .part_title a:hover{color:#fb0}#project .con_wrap .item_wrap.dark .item_box .item_part .part_content .part_thumb{scrollbar-width:thin;scrollbar-color:#353535 #fff;width:100%;height:200px;overflow-y:auto}#project .con_wrap .item_wrap.dark .item_box .item_part .part_content .part_thumb img{vertical-align:top;width:100%;height:auto!important}#project .con_wrap .item_wrap.dark .item_box .item_part .part_content .part_con dl{color:#fff;padding:20px 0}#project .con_wrap .item_wrap.dark .item_box .item_part .part_content .part_con dl dt{line-height:1.5}#project .con_wrap .item_wrap.dark .item_box .item_part .part_content .part_con dl dt:after{content:"";border-bottom:1px solid #d3d3d3;margin:15px 0;display:block}#project .con_wrap .item_wrap.dark .item_box .item_part .part_content .part_con dl dt:last-child:after{display:none}#project .con_wrap .item_wrap.dark .item_box .item_part .part_content .part_con dl dt .item_skill{color:#353535;background:#fff;border-radius:5px;margin-right:5px;padding:0 10px;font-family:Tilt Neon,sans-serif}#project .con_wrap .item_wrap .item_box .item_head{color:#353535;justify-content:space-between;margin-bottom:15px;display:flex}#project .con_wrap .item_wrap .item_box .item_head h3{font-size:30px}#project .con_wrap .item_wrap .item_box .item_head a{color:#353535;font-size:20px;font-weight:700;line-height:30px;transition:all .3s;display:block}#project .con_wrap .item_wrap .item_box .item_head a:hover{color:#fb0!important}#project .con_wrap .item_wrap .item_box .item_head.yes24 h3{width:150px}#project .con_wrap .item_wrap .item_box .item_head.yes24 h3 img{width:100%}#project .con_wrap .item_wrap .item_box .item_head.yes24 a{line-height:80px}#project .con_wrap .item_wrap .item_box .item_head.yes24 a:hover{color:#0080ff!important}#project .con_wrap .item_wrap .item_box .item_body{justify-content:space-between;display:flex}#project .con_wrap .item_wrap .item_box .item_body .body_box{width:48%}#project .con_wrap .item_wrap .item_box .item_body .item_part{color:#353535}#project .con_wrap .item_wrap .item_box .item_body .item_part .part_title{color:#fff;border-top-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:20px;padding:8px 10px;font-size:20px}#project .con_wrap .item_wrap .item_box .item_body .item_part .part_content{padding:0 10px 20px;font-size:16px}#project .con_wrap .item_wrap .item_box .item_body .item_part .part_content li svg{vertical-align:middle}#project .con_wrap .item_wrap .item_box .item_body .item_part .part_content li{margin-bottom:10px;line-height:1.3em}#project .con_wrap .item_wrap .item_box .item_body .item_part .part_content img,#project .con_wrap .item_wrap .item_box .item_body .item_part .part_content video{width:100%}#project .con_wrap .item_wrap .item_box .item_body .item_table{border-collapse:collapse;color:#353535;width:100%;font-size:15px}#project .con_wrap .item_wrap .item_box .item_body .item_table caption{display:none}#project .con_wrap .item_wrap .item_box .item_body .item_table td{border-bottom:1px solid #d3d3d3;padding:10px}#project .con_wrap .item_wrap .item_box .item_body .item_table th{text-align:center;border-bottom:1px solid #fff;padding:10px 5px;font-weight:700}#aboutme .con_wrap{margin-top:calc(25% + 60px);padding:0 10px;transform:translateY(-50%)}#aboutme .item_wrap{flex-flow:wrap;justify-content:space-between;display:flex}#aboutme .item_wrap .item_box{color:#353535;background:#fff;border-radius:5px;width:100%;min-width:400px;max-width:590px;margin-bottom:20px;padding:20px 15px;font-size:20px}#aboutme .item_wrap .item_box h3{margin-bottom:20px;font-size:30px}#aboutme .item_wrap .item_box h3 span{font-size:20px}#aboutme .item_wrap .item_box .item_part{padding:10px 0 10px 10px;line-height:1.2em}#aboutme .item_wrap .item_box .item_part svg{vertical-align:bottom}#aboutme .item_wrap .item_box .item_part a{color:#212121;margin-left:5px}#aboutme .item_wrap .item_box .item_part .part_title{color:#fff;background:#ff7012;border-top-left-radius:8px;border-bottom-right-radius:8px;padding:2px 10px}#aboutme .item_wrap .item_box .item_part .item_date{float:right}#aboutme .item_wrap .item_box .item_part ul{padding-top:10px;padding-left:10px}#aboutme .item_wrap .item_box .item_part ul li{padding-top:5px}#skills .con_wrap{margin-top:calc(25% + 60px);padding:0 10px 10px;transform:translateY(-50%)}#skills .item_wrap{flex-flow:wrap;justify-content:space-between;display:flex;overflow-x:auto}#skills .item_wrap .item_box{text-align:center;color:#353535;background-color:#fff;border-bottom:1px solid #353535;width:100%;min-width:910px;padding:15px;font-size:20px;transition:all .3s;display:flex;position:relative}#skills .item_wrap .item_box:first-child{border-radius:10px 10px 0 0}#skills .item_wrap .item_box:nth-child(3){border-radius:0 0 10px 10px}#skills .item_wrap .item_box .item_subTitle{color:#353535;padding:15px;line-height:98px}#skills .item_wrap .item_box .item_icon{padding:20px}#skills .item_wrap .item_box .item_icon img{vertical-align:top;width:auto;height:60px}#skills .item_wrap .item_box .item_icon p{color:#353535;border-radius:8px;margin-top:10px;padding:5px 10px;font-family:Tilt Neon,sans-serif;font-size:18px}#guide{z-index:9999;background:rgba(0,0,0,.3);width:100%;height:100%;transition:all .3s;position:fixed;top:0;left:0}#guide.off{display:none}#guide .guide_in{width:100%;height:100%;position:relative}#guide .guide_in .guide_box{position:absolute}#guide .guide_in .guide_box .guide_frame{border:1px solid #d3d3d3;border-radius:10px}#guide .guide_in .guide_box.guide_box_1{top:30px;left:0}#guide .guide_in .guide_box.guide_box_1 .guide_frame{width:380px;height:50px}#guide .guide_in .guide_box.guide_box_1 .guide_explain{padding-top:10px;padding-left:10px}#guide .guide_in .guide_box.guide_box_2{top:0;right:0}#guide .guide_in .guide_box.guide_box_2 .guide_frame{float:right;width:160px;height:40px}#guide .guide_in .guide_box.guide_box_2 .guide_explain{clear:both;padding-top:10px;padding-left:10px}#guide .guide_in .guide_box.guide_box_3{top:calc(50% + 10px);left:50%;transform:translate(-50%,-50%)}#guide .guide_in .guide_box.guide_box_3 .guide_frame{text-align:center;cursor:pointer;border-radius:15px;width:500px;height:120px;font-size:30px;line-height:120px;transition:all .3s}#guide .guide_in .guide_box.guide_box_3 .guide_frame:hover{opacity:.3}#guide .guide_in .guide_box.guide_box_3 .guide_explain{text-align:center;padding-top:10px}#guide .guide_in .guide_box.guide_box_4{width:100%;bottom:0;right:0}#guide .guide_in .guide_box.guide_box_4 .guide_frame{width:100%;height:50px}#guide .guide_in .guide_box.guide_box_4 .guide_explain{padding-bottom:10px;padding-left:10px}@media screen and (max-width:1200px){#aboutme .con_wrap,#skills .con_wrap{margin:110px auto 0;transform:none}#aboutme .con_wrap .item_wrap,#skills .con_wrap .item_wrap{justify-content:center}}@media screen and (max-width:1000px){#project .item_body{display:block!important}#project .item_body .body_box{width:100%!important}#skills .item_icon img{height:50px!important}}@media screen and (max-width:800px){.pg_title{font-size:60px}#aboutme .con_wrap,#skills .con_wrap{margin:90px auto 0}}@media screen and (max-width:600px){.pg_title{font-size:40px}#aboutme .con_wrap,#skills .con_wrap{margin:70px auto 0}#skills .item_wrap .item_box{display:block}#skills .item_wrap .item_box .item_icon img{height:100px!important}#skills .item_wrap .item_box .item_subTitle{font-size:30px}}