/* 색상코드 */
/* cover_bg #0D1442;  / page_bg #FFFBEF; / point_color #FF5B1C; / txt_sub_color #A7A7A7;*/
/* font-family: mark; */
/* font-size: 
320px - 20rem; 
40px - 2.5rem;
32px - 2rem;
20px - 1.25rem;
18px - 1.125rem;
16px - 1rem;
14px - 0.875rem;
*/

body {}
#wrap {width: 100%; height: 100vh;}
#wrap .swiper-wrapper{}
#wrap .swiper-wrapper .intro_bg{
    background-color: #0D1442;
    width: 100%;
    height: 1000px;
    padding-top: 250px;
}
#wrap .swiper-wrapper .intro_bg h1 {
    /* background-color: yellow; */
    width: 1000px; margin: 0 auto;}
#wrap .swiper-wrapper .intro_bg h1 img {width: 100%;}

/* 슬라이드 2 (자기소개) */
#wrap .swiper-wrapper .profile {
    background-color: #FFFBEF;
}
#wrap .swiper-wrapper .profile .container{ /* 슬라이드 큰묶음 */
    padding: 0 140px;
    margin: 0 auto;
}
#wrap .swiper-wrapper .profile .container .intro_title_wrap { /* 타이틀 묶음 */
    /* background-color: skyblue; */
}
#wrap .swiper-wrapper .profile .container .intro_title_wrap img {
    position: relative;
}
#wrap .swiper-wrapper .profile .container .intro_title_wrap h1 {
    font-size: 2rem;
    font-weight: 500;
    position: absolute; top: 60px; left: 238px;
}
#wrap .swiper-wrapper .profile .container .intro_title_wrap h1 em{
    color: #FFFBEF;
}
#wrap .swiper-wrapper .profile .container .intro_title_wrap h2 { /* 자기소개 문구*/
    /* background-color: rgb(255, 255, 152); */
    color: #0D1442;
    font-size: 2rem;
    line-height: 1.4;
    padding-bottom: 70px;
    padding-left: 545px;
}
#wrap .swiper-wrapper .profile .container .intro_title_wrap h2 em {
    font-weight: 600;
    color: #0D1442;
}

#wrap .swiper-wrapper .profile .container .intro_contents { /* 프로필 묶음 */
    /* background-color: aquamarine; */
    position: relative;
}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap{ /* 사진 , 프로필 , qr */
    /* background-color: pink; */
}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap .my_img {padding-top: 50px;}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap p{ /* 이름 */
    /* background-color: teal; */
    padding-top: 30px;
    font-size: 1.125rem;
    color: #0D1442;
    margin-bottom: 10px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap{
    /* background-color: tomato; */
    height: 513px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap a{/* 연락처 */
    /* background-color: brown; */
    padding-top: 10px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap a img {margin-right: 10px;}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap .email{
    display: flex;
    align-items: center;
}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap .email span{color: #0D1442;}

#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap .github{
    display: flex;
    align-items: center;
}  
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap .github span{color: #0D1442;}
#wrap .swiper-wrapper .profile .container .intro_contents .left_wrap .num_qr{
    width: 70px; height: 70px;
    position: absolute;
    bottom: 14px; left: 264px;
}
/* 오른쪽 top _ info */
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap{ /* 오른쪽 info 큰묶음 */
    position: absolute; top: 0; right: 0; 
    /* background-color: pink; */
    height: 310px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap{
    /* background-color: rgb(76, 201, 194); */
    margin-bottom: 122px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap h2{
    font-size: 1.25rem;
    font-weight: 500;
    display: flex;
    color: #0D1442;
    margin-bottom: 22px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap{ /* tools 2개 묶음 */
    display: flex;
    flex-flow: row nowrap;
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap .left_tools{
    /* background-color: rgb(120, 161, 189); */
    margin-right: 80px;   
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap .left_tools li {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-right: auto;
    margin-bottom: 15px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap .left_tools li img{margin-right: 10px;}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap .left_tools li p{color: #0D1442;}

/* right_tools */
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap .right_tools {
    /* background-color: yellow; */
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .intro_info_top_wrap .right_tools li {
    /* background-color: yellow; */
    align-items: center;
    margin-right: auto;
    margin-bottom: 15px;
    display: flex; 
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap .right_tools li img{
    margin-right: 10px;
}
#wrap .swiper-wrapper .profile .container .intro_contents .intro_info_wrap .right_top_wrap .intro_info_top_wrap .right_tools li p{
    line-height: 140%;
    color: #0D1442;
}

/* right_bottom_wrap */
/* edu */
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap{
    /* background-color: yellowgreen; */
    display: flex;
    position: absolute; /* 부모기준 */ 
    top: 360px;
}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #edu_wrap {
}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #edu_wrap h2 {
    font-size: 1.25rem;;
    font-weight: 500;
    margin-bottom: 22px;
}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #edu_wrap .edu{}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #edu_wrap .edu li{margin-bottom: 15px;}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #edu_wrap .edu li span{color: #A7A7A7;}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #edu_wrap .edu li p{color: #0D1442; margin-top: 10px;}
/* license */
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #license_wrap {padding-left: 115px;}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #license_wrap h2{
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 22px;}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #license_wrap .license{}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #license_wrap .license li{margin-bottom: 15px;}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #license_wrap .license li span{color: #A7A7A7;}
#wrap .swiper-wrapper .profile .container .intro_info_wrap .right_bottom_wrap #license_wrap .license li p{color: #0D1442; margin-top: 10px;}

/* 웹 프로젝트 */
/* 탬버린즈 */
#wrap .swiper-wrapper .project1 {
    width: 100%;
    background-image: url(../images/web/bg/bg_1920_01.png);
}
#wrap .swiper-wrapper .project1 .container{/* 큰묶음 */
    padding: 0 140px;
    margin: 0 auto;
}
#wrap .swiper-wrapper .project1 .container .top_wrap{
}
#wrap .swiper-wrapper .project1 .container .top_wrap #project_title_wrap{/* 인덱스, 대제목 */
     /* background-color: yellow; */
    padding-bottom: 30px;
    display: flex;    
    flex-flow: row nowrap;
}
#wrap .swiper-wrapper .project1 .container .top_wrap #project_title_wrap img{}
#wrap .swiper-wrapper .project1 .container .top_wrap #project_title_wrap h1{
    font-size: 2rem;
    font-weight: 500;
    margin-top: 61px;
    margin-left: 23px;
    color: #fff;
}
#wrap .swiper-wrapper .project1 .container .top_wrap .project_info{  
    /* background-color: darkgreen;   */
    
    
}
#wrap .swiper-wrapper .project1 .container .top_wrap .project_info h2{
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
#wrap .swiper-wrapper .project1 .container .top_wrap .project_info p{
    color: #fff;
    margin-top: 15px;

}
#wrap .swiper-wrapper .project1 .container .top_wrap .project_info p em{
    color: #fff;
}
#wrap .swiper-wrapper .project1 .container .top_wrap #show_btn_wrap{/* 버튼 묶음 */
    /* background-color: yellow; */
    padding: 20px 0;
    /* display: flex; */
    
}
#wrap .swiper-wrapper .project1 .container .top_wrap #show_btn_wrap a{
    width: 180px; height: 0px;
    
    
}
#wrap .swiper-wrapper .project1 .container .top_wrap #show_btn_wrap a button{
    background-color: #FF5B1C;
    color: #fff;
    width: 120px; height: 36px;
    margin-right: 30px;
    text-align: center;
    border-radius: 10px;

}

#wrap .swiper-wrapper .project1 .container .top_wrap #show_btn_wrap a button:hover{/* 버튼 호버 효과 */
    /* background-color: #FF5B1C; */
    color:#fff;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.5);
}

#wrap .swiper-wrapper .project1 .container .top_wrap #show_btn_wrap a #figma{background-color: #000;}
#wrap .swiper-wrapper .project1 .container .top_wrap #show_btn_wrap a #proposal{
    background-color: #000;
}
#wrap .swiper-wrapper .project1 .container .top_wrap #show_btn_wrap a #proposal span {color: #fff;}
/* 탬버린즈 프로젝트 내용 */
#wrap .swiper-wrapper .project1 .container .bottom_wrap{/* 탬버린즈 내용 큰묶음  */
    /* background-color: wheat; */
    /* padding: 100px 0; */
    padding-top: 230px;
    display: flex;  
    flex-flow: row nowrap;
    justify-content: space-between;


}
#wrap .swiper-wrapper .project1 .container .bottom_wrap .qr {/* 탬버린즈 깃허브 큐알코드 */
    /* background-color: yellowgreen; */
    margin-top: 70px;
}
#wrap .swiper-wrapper .project1 .container .bottom_wrap .qr p{
    font-size: 0.875rem;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}
#wrap .swiper-wrapper .project1 .container .bottom_wrap .qr img{ 
    width: 70px; height: 70px;
}
#wrap .swiper-wrapper .project1 .container .bottom_wrap .project_contents{
    width: 560px;
    
}
#wrap .swiper-wrapper .project1 .container .bottom_wrap .project_contents h3{
    font-size: 1.563rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;

}
#wrap .swiper-wrapper .project1 .container .bottom_wrap .project_contents p{
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
}

/* =================================================================== */
/* 무림 */
#wrap .swiper-wrapper .project2 {
    width: 100%;
    background-image: url(../images/web/bg/bg_02.png);
}
#wrap .swiper-wrapper .project2 .container{
    padding: 0 140px;
    margin: 0 auto;
}
#wrap .swiper-wrapper .project2 .container .top_wrap{}
#wrap .swiper-wrapper .project2 .container .top_wrap #project_title_wrap{
    /* background-color: yellowgreen; */
    padding-bottom: 30px;
    display: flex;    
    flex-flow: row nowrap;
}
#wrap .swiper-wrapper .project2 .container .top_wrap #project_title_wrap img{}
#wrap .swiper-wrapper .project2 .container .top_wrap #project_title_wrap h1{
    font-size: 2rem;
    font-weight: 500;
    margin-top: 61px;
    margin-left: 23px;
    color: #fff;
}
#wrap .swiper-wrapper .project2 .container .top_wrap .project_info{}
#wrap .swiper-wrapper .project2 .container .top_wrap .project_info h2{
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
#wrap .swiper-wrapper .project2 .container .top_wrap .project_info p{
    color: #fff;
    margin-top: 15px;
}
#wrap .swiper-wrapper .project2 .container .top_wrap .project_info p em{
    color: #fff;

}
#wrap .swiper-wrapper .project2 .container .top_wrap #show_btn_wrap{    
    padding: 20px 0;
}
#wrap .swiper-wrapper .project2 .container .top_wrap #show_btn_wrap a{
    width: 180px; height: 0px;
}
#wrap .swiper-wrapper .project2 .container .top_wrap #show_btn_wrap a button{
    background-color: #FF5B1C;
    color: #fff;
    width: 150px; height: 36px;
    margin-right: 30px;
    text-align: center;
    border-radius: 10px;
}
#wrap .swiper-wrapper .project2 .container .top_wrap #show_btn_wrap a button:hover {
    color:#fff;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.5);
}
#wrap .swiper-wrapper .project2 .container .top_wrap #show_btn_wrap a #figma{ 
    background-color: #000;
    color:#fff;
}
#wrap .swiper-wrapper .project2 .container .bottom_wrap{/*무림 내용 큰묶음  */
    padding-top: 180px;
    display: flex;  
    flex-flow: row nowrap;
    justify-content: space-between;
}
#wrap .swiper-wrapper .project2 .container .bottom_wrap .qr {/* 무림 깃허브 큐알코드 */
    margin-top: 110px;
}
#wrap .swiper-wrapper .project2 .container .bottom_wrap .qr p{
    font-size: 0.875rem;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}
#wrap .swiper-wrapper .project2 .container .bottom_wrap .qr img{ 
    width: 70px; height: 70px;
}
#wrap .swiper-wrapper .project2 .container .bottom_wrap .project_contents{
    width: 560px;
}
#wrap .swiper-wrapper .project2 .container .bottom_wrap .project_contents h3{
    font-size: 1.563rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}
#wrap .swiper-wrapper .project2 .container .bottom_wrap .project_contents p{
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
}

/* 라코스테 */
#wrap .swiper-wrapper .project3{
    width: 100%;
    background-image: url(../images/web/bg/bg_03_re.png);
}
#wrap .swiper-wrapper .project3 .container {
    padding: 0 140px;
    margin: 0 auto;
}
#wrap .swiper-wrapper .project3 .container .top_wrap{}
#wrap .swiper-wrapper .project3 .container .top_wrap #project_title_wrap{
    padding-bottom: 30px;
    display: flex;    
    flex-flow: row nowrap;
}
#wrap .swiper-wrapper .project3 .container .top_wrap #project_title_wrap img{}
#wrap .swiper-wrapper .project3 .container .top_wrap #project_title_wrap h1{
    font-size: 2rem;
    font-weight: 500;
    margin-top: 61px;
    margin-left: 23px;
    color: #fff;
}
#wrap .swiper-wrapper .project3 .container .top_wrap .project_info{}
#wrap .swiper-wrapper .project3 .container .top_wrap .project_info h2{ 
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
#wrap .swiper-wrapper .project3 .container .top_wrap .project_info p{
    color: #fff;
    margin-top: 15px;
}
#wrap .swiper-wrapper .project3 .container .top_wrap .project_info p em{color: #fff;
}
#wrap .swiper-wrapper .project3 .container .top_wrap #show_btn_wrap{/* 버튼 묶음 */
    /* background-color: yellow; */
    padding: 20px 0;
    /* display: flex; */
}
#wrap .swiper-wrapper .project3 .container .top_wrap #show_btn_wrap a{
    width: 180px; height: 0px;
}
#wrap .swiper-wrapper .project3 .container .top_wrap #show_btn_wrap a button{
    background-color: #FF5B1C;
    color: #fff;
    width: 150px; height: 36px;
    margin-right: 30px;
    text-align: center;
    border-radius: 10px;
}
#wrap .swiper-wrapper .project3 .container .top_wrap #show_btn_wrap a button:hover {
    color:#fff;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.5);
}
#wrap .swiper-wrapper .project3 .container .top_wrap #show_btn_wrap a #figma{ 
    background-color: #000;
    color:#fff;
}
#wrap .swiper-wrapper .project3 .container .bottom_wrap{/*라코스테 내용 큰묶음  */
    padding-top: 180px;
    display: flex;  
    flex-flow: row nowrap;
    justify-content: space-between;
}
#wrap .swiper-wrapper .project3 .container .bottom_wrap .qr {/* 라코스테 깃허브 큐알코드 */
    margin-top: 110px;
}
#wrap .swiper-wrapper .project3 .container .bottom_wrap .qr p{
    font-size: 0.875rem;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}
#wrap .swiper-wrapper .project3 .container .bottom_wrap .qr img{ 
    width: 70px; height: 70px;
}
#wrap .swiper-wrapper .project3 .container .bottom_wrap .project_contents{
    width: 570px;
}
#wrap .swiper-wrapper .project3 .container .bottom_wrap .project_contents h3{
    font-size: 1.563rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}
#wrap .swiper-wrapper .project3 .container .bottom_wrap .project_contents p{
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
}