/*__________________index box and line______________ */
.wrap{
    position: relative;
    width:100%;
    height: auto;
    margin:0;
    padding:0;
}

.index_box{
    height: 60vw;
    position: relative;
    width: 100%;
}

.index_last_box{
    height: 20vw;
    position: relative;
    width: 100%;
}

.index_line_hor1{
    position: absolute;
    height: 0vw;
    left: 4vw;
    width: 96vw;
    border: solid 0.05vw white;
    top: 0vw;
}
.index_line_hor2{
    position: absolute;
    height: 0vw;
    left: 4vw;
    width: 96vw;
    border: solid 0.05vw white;
    top: 19.9vw;
}
.index_line_hor3{
    position: absolute;
    height: 0.05vw;
    width: 96vw;
    left: 4vw;
    border: solid 0.05vw white;
    top: 59.95vw;
}
.index_line_ver1{
    position: absolute;
    top: 0vw;
    width:0;
    height: 100%;
    left: 4vw;
    border: solid 0.05vw white;
}
.index_line_ver2{
    position: absolute;
    top: 0;
    width:0;
    left: 16vw;
    height: 100%;
    border: solid 0.05vw white;
}
.index_line_ver3{
    position: absolute;
    top: 0;
    width:0;
    left: 86vw;
    height: 100%;
    border: solid 0.05vw white;
}

/*______________default project pages________________*/

.project_box{
    height: 60vw;
    position: relative;
    width: 100%;
}
.project_long_box{
    position: relative;
    width: 100%;
}
.project_line_hor1{
    position: absolute;
    height: 0vw;
    left: 4vw;
    width: 96vw;
    border: solid 0.05vw black;
    top: 0;
}
.project_line_hor2{
    position: absolute;
    height: 0vw;
    left: 4vw;
    width: 96vw;
    border: solid 0.05vw black;
    top: 19.9vw;
}

.project_title{
    position: absolute;
    font-family: 'Rajdhani', sans-serif;
    color: black;
    font-size: 5.2vw;
    text-decoration: none;
    display:inline-block;
    top: -1vw;
    margin-left: 19vw;
    z-index: 100;
    line-height: 6.3vw;
    letter-spacing: 0.3vw;
}

.project_line_ver1{
    position: absolute;
    top: 0vw;
    width:0;
    height: 100%;
    left: 4vw;
    border: solid 0.05vw black;
}
.project_line_ver2{
    position: absolute;
    top: 0;
    width:0;
    left: 16vw;
    height: 100%;
    border: solid 0.05vw black;
}
.project_line_ver3{
    position: absolute;
    top: 0;
    width:0;
    left: 86vw;
    height: 100%;
    border: solid 0.05vw black;
}

/* -----------project1------------- */

.fullsize{
    width:70vw;
    height:40vw;
    margin-left: 16vw;
}

.fullwidth-short{
    width:70vw;
    height:20vw;
    margin-left: 18vw;
}

/*________________project 6_________________*/

.alphabet_box{
    margin-left: 16vw;
    height: 40vw;
    width: 70vw;
    margin-top: 9vw;
}

.bottom{
    margin-bottom: 15vw;
}

.square{
    width:50vw;
    height:50vw;
    margin-left: 26vw;
    border: black 0.1vw solid;
}

.pr1_img_container{
    position:relative;
    padding-bottom: 30vw;
}

 .pattern1_box{        
            margin-left: 16vw;
            z-index: 500;
            width: 70vw;
            height: 40vw;
            margin-bottom: 15vw; 
        } 

.project1_bottom_hori_line{
    position: absolute;
    height: -10vw;
    left: 4vw;
    width: 96vw;
    border: solid 0.05vw black;
    bottom: 15vw;
}

.project1_scrollbook_video_box_size{
    margin-left: 16vw;
    margin-top: 16vw;
    z-index: 500;
    width: 70vw;
    height: 40vw;
}

.screenbook_box_size{
    margin-left: 16vw;
    margin-top: 15vw;
    z-index: 500;
    width: 70vw;
    height: 45vw;;
}


/*_______________project2______________________*/

/*_________project3__________*/

.pr3_img_container{
    position:relative;
    padding-bottom: 15vw;
}

.pr3_bottom_hori_line{
    position: absolute;
    bottom:15vw;
    left: 4vw;
    width: 96vw;
    border: solid 0.05vw black;
}

.pr3_img_size{
   width: 70vw;
   height: 40.4vw;
   margin-bottom: 15vw;
   margin-left: 16vw;
}

.pr3_trilogy_img_size{
   width: 70vw;
   height: 23vw;
   margin-bottom: 15vw;
   margin-left: 16vw;
}

.pr3_description{
    margin-left: 30vw;
    width: 37vw;
    font-size: 2.1vw;
}

.pr3_detail{
    padding-top: 41vw;
    padding-right: 1vw;
    text-align: right;
    font-size: 1.9vw;
}

.pr3_waterfall_size{
   width: 70vw;
   height: 49.99vw;
   margin-bottom: 15vw;
   margin-left: 16vw;
}
/*________________project_____________*/
.pr4_img_container{
    position:relative;
    margin-left: 4vw;
    width: 96vw;
    padding-bottom: 15vw;
}

.bubble_video_box_size{
    margin-top: 5vw;
    z-index: 500;
    border-top: black 0.1vw solid;
    border-bottom: black 0.15vw solid;
    width: 100%;
    height: 100%;
}

.english_box_size{
    margin-top: 5vw;
    margin-bottom: 12vw;
    margin-left: 12vw;
    z-index: 500;
    border-top: black 0.1vw solid;
    border-bottom: black 0.15vw solid;
    width: 70vw;
}

/*______________project5________________*/

.pr5_img_container{
    position:relative;
    margin-left: 4vw;
    width: 52.5vw;
    padding-bottom: 15vw;
}

.pr5_img_size{
   width: 70vw;
   height: 40.4vw;
   margin-bottom: 15vw;
   margin-left: 12vw;
}

.pr5_bottom_hori_line{
    position: absolute;
    bottom:15vw;
    width: 96vw;
    border: solid 0.05vw black;
}

.pr5_img_size_2{
   width: 70vw;
   margin-bottom: 15vw;
   margin-left: 12vw;
}

.bubble_overall_box{
    position:relative;
}

.pr5_order_box_size0{
   width: 70vw;
   height: 85vw;
   margin-bottom: 10vw;
}

.pr5_order_box_size2{
   width: 70vw;
   height: 45vw;
   margin-bottom: 10vw;
}

.pr5_order_box_size3{
   width: 70vw;
   height: 40vw;
   margin-bottom: 10vw;
}

/*________________font and sizes__________________*/
.change_font{
    font-family: 'Rajdhani', sans-serif;
}

.project1_description{
    position: relative;
    padding-left: 22vw;
    padding-top: 8vw; 
    width: 58.5vw;
    font-size: 2.1vw;
}


.project1_screenbook_title{
    position: relative;
    padding-top: 45.3vw;
    padding-right: 1vw;
    text-align: right;
}

.project1_scrollbook_title{
    position: relative;
    padding-right: 1vw;
    text-align: right;
}

.project3_description{
    padding-left: 22vw;
    padding-top: 10vw; 
    padding-bottom: 10vw; 
    width: 58.5vw;
    font-size: 2.1vw;
}

.project3_description2{
    font-size: 2.1vw;
    text-align: right;
    padding-right: 1vw;
    position:relative;
    top: -14.5vw;
    right: 14vw;
}


.project5_description{
    position:relative;
    padding-top:41vw;
    text-align: right;
    font-size: 1.7vw;
    padding-right: 19.4vw;
}

.project5_vedio_part_description{
    position: relative;
    padding-left: 6vw;
    width: 58.5vw;
    font-size: 2.1vw;
}

.pr5_vedio_description_size{
   width: 70vw;
   height: 40.4vw;
   margin-left: 12vw;
}

.bubble_description {
    position: absolute;
    top: 43.5vw;
    font-size: 1.7vw;
    text-align: right;
    padding-left: 50.1vw;
    
}

/*____________cv________________*/

.cv_my_name{
    position: absolute;
    font-family: 'Rajdhani', sans-serif;
    color: black;
    font-size: 5.2vw;
    top: 0;
    left: 2vw;
}

.cv_introducing{
    margin: 0;
    padding-top: 12vw;
    padding-right: 1vw;
    text-align: right;
    font-size: 1.4vw;
}

.project_line_hor2_cv{
    position: absolute;
    height: 0vw;
    left: 4vw;
    width: 96vw;
    border: solid 0.05vw red;
    top: 19.9vw;
}

.cv_bottom_box{
    position: relative;
    left: 4vw;
    width: 96vw;
    height: 12vw;
    border-top: solid 0.2vw pink;
}
.top_cv_box{
    position: relative;
    width: 70vw;
    height: 19.9vw;
    margin-left: 16vw;
    border-left: solid 0.2vw blue;
    border-right: solid 0.2vw blue;
}

.cv_middle_box{
    position:relative;
    width:70vw;
    height: 40.5vw;
    margin-left: 16vw;
    border-left: solid 0.2vw orange;
    border-right: solid 0.2vw orange;
}

.cv_bottom_insside_box{
    position: relative;
    width: 70vw;
    height: 12vw;
    margin-left: 12vw;
    border-left: solid 0.2vw blue;
    border-right: solid 0.2vw blue;
}
.table_layout{
    padding-left: 4vw;
    padding-top: 7vw;
    font-size: 1.5vw;
}
.table_title{
    font-weight:bolder;
    text-align: center;
}
.table_contents{
    padding-left: 2vw;
    font-size: 1.5vw;
}

/*___________bio________________*/
.bio{
    margin:0;
    padding-left:2.5vw;
    padding-top: 8.5vw;
    width: 55vw;
    font-size: 2.1vw;
}

/*_________________index title____________________*/

ul.index_introducing_nav{
    position: fixed;
    font-family: 'Rajdhani', sans-serif;
    list-style: none;
    font-size: 2.5vw;
    text-align:left;
    letter-spacing: 0.5vw;
    top:-1.5vw;
    right: 8vw;
    z-index: 100;
    
}

ul.index_introducing_nav li a{
    text-decoration: none;
    color: white;
}

ul.index_introducing_nav li a:hover{
    color:#ce4a4a;
}


ul.index_introducing_nav li a:visit{
    color:white;
}



.index_title{
    position: absolute;
    font-family: 'Rajdhani', sans-serif;
    color: white;
    font-size: 5.2vw;
    text-decoration: none;
    top: -4.5vw;
    width:50vw;
    height: 3vw;
    margin-left: 17.5vw;
    z-index: 100;
    line-height: 6.3vw;
}

ul.project_num_nav{
    list-style: none;  
    position: fixed;
    z-index: 100;
    padding-top: 1.4vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    text-align: center;
}


ul.project_num_nav li a{
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.5vw;
    text-align: center;
    display: inline-block;
    color:white;
}

ul.project_num_nav li a:hover{
    color:#ce4a4a;
}

ul.project_num_nav li a:visit{
    color:white;
}

ul.index_introducing_nav2{
    position: fixed;
    font-family: 'Rajdhani', sans-serif;
    list-style: none;
    font-size: 2.5vw;
    text-align:left;
    letter-spacing: 0.5vw;
    top:-1.5vw;
    margin: none;
    right: 8vw;
    z-index: 100;
    
}

li.index_nav2{
    display: inline;
}

ul.index_introducing_nav2 li a{
    text-decoration: none;
    color: black;
}

ul.index_introducing_nav2 li a:hover{
    color:#ce4a4a;
}


ul.index_introducing_nav2 li a:visit{
    color:black;
}


ul.project_num_nav2{
    list-style: none;  
    position: fixed;
    z-index: 100;
    padding-top: 1.4vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    text-align: center;
}


ul.project_num_nav2 li a{
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.5vw;
    text-align: center;
    display: inline-block;
    color:black;
}

ul.project_num_nav2 li a:hover{
    color:#ce4a4a;
}

ul.project_num_nav2 li a:visit{
    color:black;
}


/*_________________background color________________________*/
.color_dark0{
    background-color: #000000;
}

.color_dark1{
    background-color: #0f0f0f; 
}

.color_dark1-2{
    background-color: #191919; 
}


.color_dark2{
    background-color: #2a2a2a;
}

.color_dark3{
    background-color: #333030;
}

.color_dark4{
    background-color: #434343;
}

/*___________________________imgs____________________________*/
.index_img{
    opacity:0.3;
}

.index_img:hover{
    opacity:1;
}