@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1500px){
     #project_view .list_btn{bottom: 20px;top: auto;margin: 0;z-index: 100;}
     #project_view .list_btn a{color: #f4a261;background: #fff;border:1px solid #f4a261;border-radius: 25px;font-size: 20px;}
     #project_view .list_btn a::before{border-color: #f4a261;}
     
}
@media screen and (max-width: 1280px){
     #main .about .p_wrap{width:720px}
     #main .about .right_box{width: calc(100% - 720px);}
     #main .project::before{left: 20px; width: calc(100% - 40px);}
     #main .contact::before{left: 20px; width: calc(100% - 40px);}
     #main .skills::before{left: 20px; width: calc(100% - 40px);}
     .project_view .img_wrap .pc_img{width:75%}
     .project_view .img_wrap .mo_img{width: 23%;margin-left: 2%;}
}
@media screen and (max-width: 1200px){

     #main .about .p_wrap{width:620px}
     #main .about .right_box{width: calc(100% - 620px);}
     #main .about .p_wrap h1{font-size: 34px;}
     #main .about .p_wrap p{font-size: 16px;}
     #main .about .p_wrap p.bld{font-size: 20px;}
     .size {width:100%; padding:0 20px; box-sizing: border-box;}
}
@media screen and (max-width: 1090px){
     #main .about .p_wrap{width:100%}
     #main .about .right_box{width: 100%; max-width:500px;}
}
@media screen and (max-width: 1024px){
.cursor{display: none;}
}
@media screen and (max-width: 960px){
     .project .pj_list ul li{background: rgba(17, 22, 33, 0.8);}
     #main .project{background-size:420px;}
     #main .contact {padding-bottom: 40px;}
     #main .contact .sns_wrap{width: 100%;margin-top: 40px;}
     #main .contact .sns_wrap ul{padding-top: 20px;}
     #main .contact .img_wrap{width: 100%; max-width: 420px;display: block;margin: 30px auto 0;}
}
@media screen and (max-width: 768px){

	 #intro .tbc h1{font-size:2em}
      .project .pj_list ul li{width:48%}
      .project_view .img_wrap{text-align: center;}
      .project_view .img_wrap span{display: block;}
      .project_view .img_wrap .pc_img{width: 100%;}
      .project_view .img_wrap .mo_img{margin-top: 30px;width: 100%; margin-left: 0;}
     .b_tit a{font-size: 18px;bottom: 0;}
}
@media screen and (max-width: 640px){
     .b_tit b{font-size: 30px;}
     header{height: 70px;}
     #main .about{padding:90px 0 60px}
     #main .skills{padding:90px 0 }
     #main .project{padding:90px 0 }
     #main .about .p_wrap p br{display: none;}
     #main .about .p_wrap p.bld br{display: block;}
     .project .pj_list ul li b{font-size: 16px;}
     .project .pj_list ul li p{font-size: 15px;line-height: 18px;height: 36px;max-height: 36px;}
     .project .pj_list ul li > div > div a{line-height: 28px;}
     #main .skills .sp_wrap ul li{padding:5px 10px;}
     #main .skills .sp_wrap ul li p{line-height: 1;font-size: 16px;}
}  
@media screen and (max-width: 540px){
     .s_tit{margin-top: 20px;}
     #main .about .p_wrap h1{font-size: 30px;}
     #main .about .p_wrap p{font-size: 14px;}
     #main .about .p_wrap p.bld{font-size: 17px;}
     #main .about .li_list.career_list ul li{height: 70px;}
     #main .about .li_list ul li{width:98%;height: 80px;}
     .project .pj_list ul li{width: 98%;}
     .project .pj_list ul li > div{height: 140px;}
}
@media screen and (max-width: 480px){

     .b_tit b{font-size: 28px;}
     .s_tit b{font-size: 16px;}
 	 #main .visual .main_text h1{font-size:40px}
     #main .about .p_wrap h1{font-size: 24px;}
     #main .about .p_wrap p{font-size: 15px;}
     #main .about .p_wrap p.bld{font-size: 17x;}
     #main .about .li_list ul li b{font-size: 13px;}
     #main .about .li_list.career_list ul li span{font-size:14px}
     #main .about .li_list ul li p{font-size: 14px;}
     #main .about .li_list ul li span{font-size:12px;}
     #main .about .li_list ul{padding-top: 8px;}
     #main .skills .sp_wrap ul {margin-left: -10px;}
     #main .skills .sp_wrap ul li{margin-left: 10px;}
     #main .skills .sp_wrap ul li p{font-size: 15px;}
     #main .skills .sp_wrap ul li a{font-size: 14px;}
     #main .project{background: none;}
	 #main .visual .down a{font-size:14px}
	 #main .visual .down img{max-width:20px}
     .project_view .info_wrap h1{font-size: 28px;}
     .project_view .info_wrap span{font-size: 14px;}
     .project_view .info_wrap p{font-size: 15px;}
     .project_view .info_wrap a{font-size: 14px;max-width: 100px; line-height: 32px;padding-left: 15px;}
     #main .contact .sns_wrap ul li span{font-size: 14px;width:105px}
    /* #main .contact .sns_wrap ul li a{font-size: 15px;width: calc(100% - 105px);}*/

     #main .about .li_list ul li{border-radius: 10px;}
     #main .skills .sp_wrap ul li p{border-radius:10px}
     .project .pj_list ul li{border-radius:10px}
     #project_list{padding-top: 65px;}
     .project .pj_list{margin-top: 40px;}

   
}
@media screen and (max-width: 450px){
     header{height: 65px;}
     header h1 a{width: 120px;}
     header .util a{font-size: 21px;}
    
     #main .about .p_wrap h1{font-size: 26px;margin-top:35px}
     #main .about .p_wrap p{font-size: 14px;}
     #main .about .p_wrap p.bld {font-size: 18px}
     #main .about .p_wrap p.bld em.mbr2{display: block;}
     .project .pj_list ul li{width: 98%;}
     .project .pj_list ul li > div{height: 140px;}
     #main .contact .sns_wrap p{font-size: 18px;}
     #main .skills .sp_wrap ul li {padding: 5px 8px;border-radius: 8px;}
     #main .skills .sp_wrap ul li span{font-size: 11px;width: 16px;height: 16px;line-height: 16px;}
     #main .contact .sns_wrap ul li span{display: block;}
     #main .contact .sns_wrap ul li a{padding-left: 15px;margin-top: 3px;box-sizing: border-box;}
     #main .contact .sns_wrap ul li a::before{display: block;}
     #main .contact .sns_wrap ul li a::after{width: calc(100% - 15px);left:15px}
     

}

@media screen and (max-width: 415px){
     #main .about{padding:60px 0 45px}
     #main .skills{padding:60px 0 }
     #main .project{padding:60px 0 }
     #main .skills .sp_wrap ul li p{font-size: 14px;}
     #main .about .p_wrap p.bld{font-size: 16px;}
     #main .contact .sns_wrap p{font-size: 16px;}
     .b_tit a{font-size: 15px;line-height: 18px;}
}
@media screen and (max-width: 360px){
     #main .skills .sp_wrap ul li p{font-size: 13.5px;}
}