@charset "utf-8";



/* header */

#header{ 
    position:absolute; 
    top:0; 
    left:0; }

h1{ margin:30px; }



/* main + swiper */

.main{ background:url(../images/main_bg.jpg) no-repeat center/cover; }

.swiper-wrap { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:57%;
    height:32%;
    margin: auto;
    overflow: hidden; } 
    
#my-swiper{ 
    width:100%; }

#my-swiper .swiper-slide { 
    width:100%;
    color:#632ab1; 
    text-align:center; 
     }
#my-swiper .swiper-slide p:first-child{ 
    font-size:7rem; 
    font-weight:700; }
#my-swiper .swiper-slide p:last-child{ 
    font-size:2rem; 
    line-height:4rem; }


/* fontawesome arrow & animation */    


.swiper-button-next, .swiper-button-prev, .swiper-pagination{ 
    color:#df36c5; 
    font-size:1.2rem; }

.swiper-button-next, .swiper-button-prev{   
    top: initial; 
    bottom: 0;
    object-fit:cover; 
    transition: transform .3s; 
    transform:scale(1.3); }

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}    

.swiper-button-prev{ left: 41%; }
.swiper-button-next{ right:41%; }


.fa-circle-chevron-left, .fa-circle-chevron-right {  
    color:#df36c5;
    transform:scale(1.3); }

.fa-circle-chevron-left:hover, .fa-circle-chevron-right:hover{
    transform:scale(1.6);
    transition: transform .3s;
    color:#632ab1; }    




/* about */

.about{ background:url(../images/about_bg.jpg) no-repeat center/cover; }

.subabout{ 
    background: linear-gradient(to right, #a0d9e6, #f3b6f7, #e779f2, #8ba0ef );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; 
    padding-top:150px;
    padding-left:10px; }

.about-ani{ 
    padding-right:250px; 
    opacity:0; 
}

.about-ani.act{
    padding-right:0; 
    opacity:1; 
    transition-duration: 2s;
    transition-property: opacity;
    transition: all 2s;    
}


.subtext_about{ padding-left:160px; }

.subabout_text{ 
    line-height:2rem; 
    padding-left:160px; 
    padding-top:30px; }
.subabout_text2{ padding-bottom:30px; }


/* skills */

.skills{ background:url(../images/skills_bg.jpg) no-repeat center/cover; }

.subskills{ 
    background: linear-gradient(to left, #61d9e4, #f3b6f7, #e779f2, #bbb4f8 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; 
    text-align: right; 
    padding-top:150px;
    padding-right:10px; }


.skills-ani{ 
    padding-left:250px; 
    opacity:0; 
}

.skills-ani.act2{
    padding-left:0; 
    opacity:1; 
    transition-duration: 2s;
    transition-property: opacity;
    transition: all 2s;    
}    

.subtext_skills{ 
    text-align: right; 
    padding-right:10px; }

.skills_ul{ 
    display:flex;   
    flex-wrap: wrap;
    justify-content: flex-end; 
    gap: 30px;
    width: 70%; 
    margin-left:auto; 
    padding-right:10px; 
    padding-top:50px; }

.skills_ul li{ 
    width:30%; 
    height:160px; }


.skills_ul li p:first-child{  
    height:50px; 
    line-height:50px; 
    text-align:center; 
    border: 2px solid #843ce6; 
    box-shadow: 4px 4px #843ce6; }
.skills_ul li p:last-child{ 
    font-size:2rem; 
    font-weight:700;
    line-height:5rem;
    text-align: center; }


/* certificate */

.certificate{ background:url(../images/certificate_bg.jpg) no-repeat center/cover; }

.subcertificate{ 
    background: linear-gradient(to right, #61d9e4, #e7e6cf, #f8b6f9, #bfcbf7 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    padding-top:150px;
    padding-left:10px; }

    .certificate-ani{ 
        padding-right:250px; 
        opacity:0; 
    }
    
    .certificate-ani.act3{
        padding-right:0; 
        opacity:1; 
        transition-duration: 2s;
        transition-property: opacity;
        transition: all 2s;    
    }

.certificate_ul{ 
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:45%; 
    padding-left:10px; } 
.certificate_ul li{ 
    width:42%; 
    border-left:1px solid #843ce6;
    padding:10px 0 30px 30px; 
    margin-top:50px; }

.certificate_ul li p:first-child{ 
    font-weight:700;
    margin-bottom:20px; }
.certificate_ul li p:last-child{ line-height:2rem; }


/* education */

.education{ background:url(../images/education_bg.jpg) no-repeat center/cover; }

.education_width{ 
    display:flex; 
    flex-direction: row; 
    height:100vh; 
    padding-top:200px; }


.education-ani{ 
    padding-left:250px; 
    opacity:0; 
}

.education-ani.act4{
    padding-left:0; 
    opacity:1; 
    transition-duration: 2s;
    transition-property: opacity;
    transition: all 2s;    
} 

.edu_title{ 
    position:relative;
    width:33%;
    margin-top:70px;
    margin-right:60px; 
    padding-left:10px; }

.subedu{ 
    position:absolute; 
    left:50%; 
    display:flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    width:190px; 
    font-size: 70px; 
    margin:85px 0 0 -88px; }

/* education h2 background gradient */  

.subedu span:nth-child(1){ background: linear-gradient(to right, #f8b5f8, #cdc1f3 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(2){ background: linear-gradient(to right, #e9a0f3, #83b0f9 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(3){ background: linear-gradient(to right, #72c7f8, #72e7f7 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(4){ background: linear-gradient(to right, #72e7f7, #c1a9ef );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(5){ background: linear-gradient(to right, #d999f2, #a19cf0 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(6){ background: linear-gradient(to right, #7da1f2, #5dc0ec );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(7){ background: linear-gradient(to right, #68ddeb, #87c0ed );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(8){ background: linear-gradient(to right, #d577ef, #c2b0f4 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
.subedu span:nth-child(9){ background: linear-gradient(to right, #c4c0f4, #96dbec );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }

/* round animation start */

.round_ani{ 
    max-width: 390px;
    animation: rotate_image 15s linear infinite; 
    transform-origin: 50% 50%; }

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}

.edu_table{ 
    width:60%; 
    padding-right:10px; 
    overflow-y:hidden; }
  
.accordion{ 
    width:100%; 
    font-weight:700; 
    border:1px solid #0d0d0d; 
    text-align: left;
    padding: 25px;
    margin-bottom:5px; } 

.accordion::before {
    content: '+';
    font-weight:500;
    color: #0d0d0d;
    float: right;
    margin-left: 5px; }    


.acc{ background-color:#fff; }  

.acc::before{ content: '-'; }


.pane1{ 
    line-height:1.4rem; 
    padding:0 50px; 
    background-color:#e1cbff; 
    max-height: 0;
    overflow:hidden; 
    transition: max-height 0.2s ease-out; }

.pane1 p{ padding:20px 0; }    




/* works */

.works{ background:url(../images/works_bg.jpg) no-repeat center/cover; }

.subworks{ 
    background: linear-gradient(to right, #f1b9f8, #61d4e4, #c6e8d6, #c0cef8, #f1b9f8 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    padding-top:75px;
    padding-left:10px; }



.works-ani{ 
    opacity:0;
    transition: all 2s; 
}

.works-ani.act5{
    opacity:1; 
    transition-duration: 3s;
    transition-property: opacity;
    transition: all 2s;    
}


/* works tab animation */


input[name="tab_item"] { display: none; }    


.label_btn{ 
    display:flex; 
    flex-direction: row; 
    justify-content: flex-end;
    margin:50px 0; 
    padding-right:10px; }

.tab_item, .tab_item::before, .tab_item::after, 
.label_btn p, .label_btn p::before, .label_btn p::after{
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s; }

.tab_item, .label_btn a{ 
    display:inline-block;
    position:relative;
    overflow: hidden;
    width:190px; 
    height:50px; 
    line-height:50px;
    text-align:center;
    color:#fff; 
    cursor: pointer;
    z-index:2; }  

.tab_item {
    background-color:#632ab1;
} 

.label_btn a {
    background-color:#d999f2;
}    

.works_wrap label:nth-of-type(2){ margin:0 10px; }


.fa-arrow-down{ 
    font-size:1.2rem;
    vertical-align: middle;
    margin-left:10px; }         

/* .tab_item::before, .tab_item::after, 
.label_btn p::before, .label_btn p::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1; 
    display:block; }     */
    
 
/* .tab_item::after, .label_btn p::after{ top:-100%; } 
.tab_item:hover::after, .label_btn p:hover::after{
    top:0;
    background-color:#d999f2; } */

    
/* .works_wrap input:checked + .tab_item, .label_btn a{
    background-color:#d999f2;
    color: #fff; }     */


/* responsive, desktop common */

.swiper-container { display:none; }     


#tab1:checked ~ #responsive{ display:block; }
#tab2:checked ~ #desktop{ display:block; }

.webworks_wrap{ 
    width:75%;
    line-height:1.4rem;
    padding:40px 25px; 
    margin:0 auto;
    border:1px solid #843ce6; 
    box-sizing: border-box; 
    border-radius: 5%; }
  
    
.webworks_wrap>p:nth-of-type(2){ 
    font-weight:700; 
    margin:20px 0; }

.works_rink{ 
    display:flex; 
    flex-direction:row; 
    margin-top:15px; }
.works_rink p:nth-child(2){ margin-left:10px; }


/* .works_rink a animation */

.works_rink a{ 
    width:100px; 
    height:40px; 
    line-height:45px; 
    text-align: center;
    font-weight:500; 
    background:#e1cbff; 
    transition: all .3s; }
   
.works_rink a:hover{ background:#d999f2; }


.works-button-next, .works-button-prev{
   top:30%;
   margin-top:60px;
}   

.works-button-next{ right:1%; }
.works-button-prev{ left:1%; }

.fa-chevron-left, .fa-chevron-right{  
    color:#632ab1;
    font-size:3rem;
    transform:scale(1.0); 
    transition: transform .3s; }

.fa-chevron-left:hover, .fa-chevron-right:hover{ 
    transform:scale(1.3);
    transition: transform .3s; }   




/* contact */

.contact{ 
    background:url(../images/contact_bg.jpg) no-repeat center/cover; }

.contact_wrap{ 
    position:relative;
    width:1200px;  
    text-align: center; 
    margin:0 auto; 
    z-index:1; }

.contact_content{ 
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%);
    width:750px; 
    height:750px; 
    margin-top:80px;
    background:url(../images/contact.png) no-repeat center/cover; }

.contact-ani{ 
    opacity:0;
    transition: all 2s; 
}

.contact-ani.act6{
    opacity:1; 
    transition-duration: 3s;
    transition-property: opacity;
    transition: all 2s;    
}

.subcontact{ 
    font-size:5rem;
    color:#632ab1; 
    padding:230px 0 30px 0; }
.contact_content p{ line-height:1.4rem; } 
.contact_content p:nth-of-type(2){ padding:20px 0; }   
.contact_content p:nth-of-type(3){ padding-top:30px; }


/* text animation start */

.text_animation{ 
    max-width:100%;
    overflow: hidden;
    padding-top:420px; }
.text_animation p{ 
    width:3065px;
    height:113px;
    animation: 50s linear 0s infinite textmove;
     }
@keyframes textmove {
    0%{
        -webkit-transform: translateX(0%);
    } 100%{
        -webkit-transform: translateX(-37.5%);
    }

}     

.copyright{ margin-top:330px; text-align:center; }




/* 태블릿 모드 시작 */

@media all and ( max-width:1199px ) {
  

/* main + swiper */

.main{ background:url(../images/main_bg.jpg) no-repeat center/cover; }

.swiper-wrap { 
    width:70%;
    height:30%; } 
    
#my-swiper .swiper-slide p:first-child{ 
    font-size:5rem; }
#my-swiper .swiper-slide p:last-child{ 
    font-size:1.5rem; 
    line-height:3rem; }  

.swiper-button-prev{ left: 38%; }
.swiper-button-next{ right:38%; }


/* about */

.about{ background:url(../images/about_bg.jpg) no-repeat center/cover; }

.subabout{ padding-top:120px; }


.subtext_about{ padding-left:10px; }

.subabout_text{  
    padding-left:10px; 
    padding-right:5px;
    padding-top:20px; }
.subabout_text2{ padding-bottom:20px; }




/* skills */

.skills{ background:url(../images/skills2_bg.jpg) no-repeat center/cover; }

.subskills{ padding-top:120px; }   

.skills_ul{ width:70%; }

.skills_ul li{ width:30%; height:160px; }



/* certificate */

.certificate{ background:url(../images/certificate2_bg.jpg) no-repeat center/cover; }

.subcertificate{ padding-top:120px; }

.certificate_ul{ width:60%; } 



/* education */

.education{ background:url(../images/education_bg.jpg) no-repeat center/cover; }

.education_width{ padding-top:150px; }


.edu_title{ 
    width:55%;
    margin-top:100px;
    margin-right:30px; }

.subedu{ 
    position:absolute; 
    left:0; 
    width:160px; 
    font-size: 60px; 
    margin:65px 0 0 90px; }

.round_ani{ max-width:320px; }
.round_ani img{ max-width:320px; }

.edu_table{ width:80%; }
  


/* works */

.works{ background:url(../images/works_bg.jpg) no-repeat center/cover; }

.label_btn{ margin:30px 0; }   
.webworks_wrap{ width:70%; }

.works-button-next{ right:1%; }
.works-button-prev{ left:1%; }

.fa-chevron-left, .fa-chevron-right{ font-size:2.5rem; }  

.mob-none{ display:none; }
.works_rink p:first-child a{ width:200px; }


/* contact */

.contact{ 
    background:url(../images/contact_bg.jpg) no-repeat center/cover; }

.contact_wrap{ width:500px; }

.contact_content{ 
    width:500px; 
    height:500px; 
    margin-top:150px; }

.subcontact{ 
    font-size:3.8rem; 
    padding:120px 0 30px 0; } 
.contact_content p:nth-of-type(3){ padding-top:20px; }


.text_animation{ 
    max-width:100%;
    overflow: hidden;
    padding-top:370px; }

.text_animation img{ width:70%; }    

.copyright{ margin-top:330px; }

}


/* 태블릿 - 모바일 모드 시작 */

@media all and ( max-width:767px ){

h1 img{ width:70%; }    
  

/* main + swiper */


.swiper-wrap { 
    width:98%;
    height:25%; } 
    
#my-swiper .swiper-slide p:first-child{ font-size:4.5rem; }
#my-swiper .swiper-slide p:last-child{ font-size: 1.3rem; }  


.main-btn{ 
    width:150px;; 
    height:30px; 
    position:relative; 
    margin:0 auto; 
    padding-top:30px; }
.swiper-button-next, .swiper-button-prev, .swiper-pagination{ font-size:1rem; }

.swiper-button-prev{ left: 1%; }
.swiper-button-next{ right:1%; }




/* about */

.about{ background:none; }

.subabout{ padding-top:150px; }
.subtext_about{ padding-left:10px; }

.subabout_text{  
    padding-left:5px; 
    padding-top:20px; 
    line-height:1.2rem; }
.subabout_text2{ padding-bottom:20px; }




/* skills */

.skills{ background:none; }

.subskills{ padding-top:150px; }   

.skills_ul{ width:90%; padding-top:60px; }

.skills_ul li{ width:30%; height:130px; }

.skills_ul li:nth-child(even){ margin:0 15px; }
.skills_ul li p:first-child{ 
    height:40px; 
    line-height:40px; }
    .skills_ul li p:last-child{ font-size:1.5rem; }    



/* certificate */

.certificate{ background:none; }

.subcertificate{ padding-top:150px; }
.certificate_ul{ width:80%; } 


/* education */

.education{ background:none; }

.education_width{ 
    flex-direction: column; 
    padding-top:30px; }

.edu_title{ 
    width:70%;
    margin:0 auto; }

.subedu{ 
    position:absolute; 
    left:50%; 
    width:150px; 
    font-size: 55px; 
    margin:65px 0 0 -70px; }

.round_ani{ 
    max-width:300px; 
    margin:0 auto; }
.round_ani img{ max-width:300px; }

.edu_table{ 
    width:80%; 
    margin:0 auto; 
    padding-top:40px; }

.accordion{ 
    padding:15px; 
    font-size:0.9rem; }
  


/* works */

.works{ background:none; }

.label_btn{  
    justify-content:center; 
    padding-right:0; 
    margin-bottom:60px; }  
    
.tab_item, .label_btn a{ 
    height:40px; 
    line-height:40px; }   

.webworks_wrap{ 
    width:65%; 
    padding:40px 50px; }

.works_wrap label:nth-of-type(2){ margin:0 5px; }

.fa-chevron-left, .fa-chevron-right{ font-size:2rem; }  


/* contact */


.contact_wrap{ width:390px; }

.contact_content{ 
    width:390px; 
    height:390px; 
    margin-top:190px; }

.subcontact{ 
    font-size:2.5rem; 
    padding:80px 0 20px 0; } 

.contact_content p{ 
    line-height:1.2rem; 
    letter-spacing: -0.5px; } 

.contact_content p:nth-of-type(3){ padding-top:10px; }

.text_animation img{ width:50%; }    

.copyright{ letter-spacing: -1px; }

}


/* 모바일 모드 시작 */

@media all and ( max-width:499px ){

h1 img{ width:60%; }    
  

/* main + swiper */

    
#my-swiper .swiper-slide p:first-child{ font-size:3rem; }
#my-swiper .swiper-slide p:last-child{ font-size: 0.9rem; }  

.swiper-button-next, .swiper-button-prev{ bottom:-2px; }

.swiper-button-next, .swiper-button-prev, .swiper-pagination{ font-size:0.9rem; }


/* about */

.subabout{ padding-top:80px; }



/* skills */


.subskills{ padding-top:80px; }   

.skills_ul{ width:90%; }

.skills_ul li{ 
    width:45%; 
    height:120px; }

.skills_ul li:nth-child(even){ margin-right:0px; }
.skills_ul li:nth-child(3), .skills_ul li:nth-child(5){ margin-left:0px; }
.skills_ul li p:last-child{ font-size:1.2rem; }    



/* certificate */

.subcertificate{ padding-top:80px; }
.certificate_ul{ width:90%; } 

.certificate_ul li{ width:40%; padding:20px 0 30px 15px; }

.certificate_ul li p:last-child{ line-height:1.5rem; }



/* education */


.education_width{ padding-top:30px; }
.edu_title{ width:90%; }

.subedu{ 
    width:110px; 
    font-size: 40px; 
    margin:50px 0 0 -50px; }

.round_ani{ max-width:220px; }
.round_ani img{ max-width:220px; }

.edu_table{ padding-top:30px }

.accordion{ font-size:0.8rem; }
  


/* works */


.label_btn{  
    margin-bottom:40px; }  
    
.tab_item, .label_btn p{ 
    letter-spacing: -0.5px; }   
.fa-arrow-down{ display:none; }
.webworks_wrap{ 
    width:65%; 
    line-height:1.2rem;
    padding:25px 15px; }

.webworks_wrap>p:nth-of-type(2){ margin:10px 0; }    

.works_wrap label:nth-of-type(2){ margin:0 3px; }
 
.works_rink a{ height:30px; line-height:30px; }
.works_rink p:first-child a{ width:100px; }



/* contact */


.contact_wrap{ width:300px; }

.contact_content{ 
    margin-top:160px; 
    background:none; }

.contact_content p{ letter-spacing: 0px; } 

.text_animation img{ display:none; }    

.copyright{ 
    margin-top:230px; 
    letter-spacing: 0px; }

}