body{
    background-color: rgb(214, 230, 245);
}

.frame{
    margin: 30px 150px;
    display: flex;
    flex-direction: column;
}

/* navigation */

.navigation{
    position: fixed; 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.site-name{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    color: #C2B4AB;
}

.navigation>ul{
    margin: 0;
    margin-right: 50px;
}

.navigation>ul>li{
    display: inline;
    align-self: center;
    margin: 0;
    margin-left: 120px;
}

.nav-menu{
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: 20px;
    color: black;
    text-decoration: none;
    transition: 0.7s;
}

.nav-menu:hover{
    color: white;
    transition: 0.3s;
}

/* dashboard */

.dashboard{
    display: flex;
    flex-direction: column;
    margin-top: 100px; 
    margin-bottom: 70px;
}

.comment{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 50px;
}

.sample{
    background-color: rgb(192, 204, 255);
    -webkit-text-stroke: 1px black;
}

.sample:hover{
    background-color: transparent;
    color: white;
    -webkit-text-stroke: 1px black;
    transition: none;
}

/* 기본값 */
.highlight{
    color: white;
    -webkit-text-stroke: 1px black; /* 텍스트 문자에 테두리 외곽선(획)을 스타일하는 속성 */
}

/* 마우스 커서를 글자에 가져가면 */
.highlight:hover{
    color: black;
    transition: 1s; /* 1초 동안 변경 */
}

/* 마우서 커서를 글자에 가져간 후 배경색 */
.type1:hover{
    background-color: yellowgreen;
}

.type2:hover{
    background-color: skyblue;
}

.type3:hover{
    background-color: orange;
}

/* profile-history */

.profile-history>h2{
    font-family: 'Noto Sans KR', sans-serif;
}

.profile-history>p{
    font-family: 'Noto Sans KR', sans-serif;
}

/* profile-section */

.profile-section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin: 100px 100px;
}

#profile-picture{
    width: 300px;
    height: 300px;
    margin-right: 60px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
}

.profile-introduction>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

.profile-introduction>p{
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    margin-bottom: 30px;
}

#capability{
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 17px;
}

/*value section*/

.value-menu{
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
    margin: 30px 100px;
}

.value-section{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    margin: 100px 150px;
    margin-top: 20px;
}

.value{
    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
    align-items: center;

}

.value-icon{
    width: 100px;
    height: 100px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
}

.value-intro{
    margin-left: 30px;
}

.value-name{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700px;
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 10px;
}

.value-exp{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 16px;
    margin: 0px;
}

/*footer*/

.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 200px;
}

.contact{
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: black;
    margin-bottom: 40px;
    border-bottom: 2px solid black;
}

.links>a>img{
    width: 100px;
    height: 100px;
    margin: 20px;
}

/* 
Embedded 
*/

/* embedded-section */

.embedded-section{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    margin: 100px 100px;
}

#embedded-picture{
    width: 250px;
    height: 250px;
    margin-right: 60px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
    
}

.embedded-introduction{
    margin-left: 75px;
}

.embedded-introduction>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

.embedded-introduction>p{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 16px;
    animation: slide 2s ease-out;
    position: relative;
}

@keyframes slide{
    from{
        left: 100px;
        opacity: 0;
    }
    to{
        left: 0px;
        opacity: 1;
    }
}

/* embedded-one */

.embedded-one>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

/* embedded-two */

/* embedded-three */

#embedded_list_01 > li{
    margin: 0;
    margin-right: 50px;
    display: inline-block;
    position: relative;
}

#embedded_list_01 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#embedded_list_01 > li > a > img{
    width: 150px; 
    height: 150px;
}

#embedded_list_01 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* embedded-four */

#embedded_list_02 > li{
    margin: 0;
    margin-right: 80px;
    display: inline-block;
    position: relative;
}

#embedded_list_02 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#embedded_list_02 > li > a > img{
    width: 200px; 
    height: 200px;
}

#embedded_list_02 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* embedded-five */

#embedded_list_03 > li{
    margin: 0;
    margin-right: 150px;
    display: inline-block;
    position: relative;
}

#embedded_list_03 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#embedded_list_03 > li > a > img{
    width: 200px; 
    height: 200px;
}

#embedded_list_03 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* embedded-six */

#embedded_list_04 > li{
    margin: 0;
    margin-right: 150px;
    display: inline-block;
    position: relative;
}

#embedded_list_04 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#embedded_list_04 > li > a > img{
    width: 200px; 
    height: 200px;
}

#embedded_list_04 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* embedded-seven */

/* 
Front-End 
*/

/* frontend-section */

.frontend-section{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    margin: 100px 100px;
}

#frontend-picture{
    width: 250px;
    height: 250px;
    margin-right: 60px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
}

.frontend-introduction{
    margin-left: 75px;
}

.frontend-introduction>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

.frontend-introduction>p{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 16px;
    animation: slide 2s ease-out;
    position: relative;
}

/* frontend-one */

.frontend-one>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

/* frontend-two */

.frontend-two>h4{
    font-size: 17px;
}

#frontend_list_01 > li{
    margin: 0;
    margin-left: 75px;
    display: inline-block;
    position: relative;
}

#frontend_list_01 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#frontend_list_01 > li > a > img{
    width: 300px; 
    height: 200px;
}

#frontend_list_01 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* frontend-three */

#semantic-picture{
    width: 300px;
    height: 300px;
    margin-left: 150px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
}

#frontend-semantic{
    width: 300px;
    height: 300px;
    margin-left: 150px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
}

.frontend-two>h4{
    font-size: 17px;
}

#frontend_list_02 > li{
    margin: 0;
    /* margin-left: 75px; */
    margin-left: 200px;
    display: inline-block;
    position: relative;
}

#frontend_list_02 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#frontend_list_02 > li > a > img{
    width: 300px; 
    height: 300px;
}

#frontend_list_02 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* frontend-four */

#frontend_list_03 > li{
    margin: 0;
    margin-left: 70px;
    display: inline-block;
    position: relative;
}

#frontend_list_03 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#frontend_list_03 > li > a > img{
    width: 300px; 
    height: 100px;
}

#frontend_list_03 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

#frontend_list_04 > li{
    margin: 0;
    margin-left: 445px;
    display: inline-block;
    position: relative;
}

#frontend_list_04 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#frontend_list_04 > li > a > img{
    width: 300px; 
    height: 300px;
}

#frontend_list_04 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

#frontend_list_05 > li{
    margin: 0;
    /* margin-left: 75px; */
    margin-left: 150px;
    display: inline-block;
    position: relative;
}

#frontend_list_05 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#frontend_list_05 > li > a > img{
    width: 350px; 
    height: 200px;
}

#frontend_list_05 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

#frontend_list_06 > li{
    margin: 0;
    margin-left: 150px;
    display: inline-block;
    position: relative;
}

#frontend_list_06 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#frontend_list_06 > li > a > img{
    width: 350px; 
    height: 350px;
}

#frontend_list_06 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* 
Back-End 
*/

/* backend-section */

.backend-section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin: 100px 100px;
}

#backend-picture{
    width: 250px;
    height: 250px;
    margin-right: 60px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
    
}

.backend-introduction{
    margin-left: 75px;
}

.backend-introduction>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

.backend-introduction>p{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 16px;
    animation: slide 2s ease-out;
    position: relative;
}

/* 
Machine-Learning
*/

/* ml-section */

.machine-section{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    margin: 100px 100px;
}

#machine-picture{
    width: 250px;
    height: 250px;
    margin-right: 60px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
    
}

.machine-introduction{
    margin-left: 75px;
}

.machine-introduction>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

.machine-introduction>p{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 16px;
    animation: slide 2s ease-out;
    position: relative;
}

/* machine-one */

.machine-one>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

/* machine-two */

.ml_01{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_list_01 > li{
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    position: relative;
}

#ml_list_01 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#ml_list_01 > li > a > img{
    width: 400px; 
    height: 300px;
}

#ml_list_01 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* machine-three */

.ml_02{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_list_02 > li{
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    position: relative;
}

#ml_list_02 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#ml_list_02 > li > a > img{
    width: 500px; 
    height: 300px;
}

#ml_list_02 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

/* machine-four */

.ml_pic_01{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_06{
    width: 700px;
    height: 400px;
}

.ml_pic_02{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_07{
    width: 700px;
    height: 300px;
}

/* machine-five */

.ml_pic_03{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_08{
    width: 700px;
    height: 350px;
}

.ml_pic_04{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_09{
    width: 700px;
    height: 250px;
}

/* machine-six */

.ml_03{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_list_03 > li{
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    position: relative;
}

#ml_list_03 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#ml_list_03 > li > a > img{
    width: 500px; 
    height: 300px;
}

#ml_list_03 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

.ml_04{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_list_04 > li{
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    position: relative;
}

#ml_list_04 > li > a{
    display: block; 
    position: relative; 
    padding-bottom: 19px;

}

#ml_list_04 > li > a > img{
    width: 400px; 
    height: 350px;
}

#ml_list_04 > li > a > span{
    position:absolute; 
    bottom: 0; 
    left: 50%; 
    color: #666; 
    line-height: 1.462em; 
    white-space: nowrap; 
    transform: translate(-50%, 0);
}

.ml_pic_05{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ml_14{
    width: 600px;
    height: 300px;
}

/* 
Deep-Learning
*/

/* dl-section */

.deep-section{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    margin: 100px 100px;
}

#deep-picture{
    width: 250px;
    height: 250px;
    margin-right: 60px;
    border: 2px solid #C2B4AB;
    border-radius: 25px;
    
}

.deep-introduction{
    margin-left: 75px;
}

.deep-introduction>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

.deep-introduction>p{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 16px;
    animation: slide 2s ease-out;
    position: relative;
}

/* deep-one */

.deep-one>h2{
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
}

/* deep-two */

.dl_pic_01{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_01{
    width: 700px;
    height: 400px;
}

.dl_pic_02{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_02{
    width: 600px;
    height: 350px;
}

.dl_pic_03{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_03{
    width: 600px;
    height: 350px;
}

/* deep-three */

.dl_pic_04{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_04{
    width: 700px;
    height: 500px;
}

/* deep-four */

.dl_pic_05{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_05{
    width: 700px;
    height: 200px;
}

/* deep-five */

.dl_pic_06{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_06{
    width: 700px;
    height: 500px;
}

.dl_pic_07{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_07{
    width: 700px;
    height: 250px;
}

/* deep-six */

.dl_pic_08{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_08{
    width: 700px;
    height: 550px;
}

.dl_pic_09{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_09{
    width: 700px;
    height: 400px;
}

.dl_pic_10{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dl_10{
    width: 700px;
    height: 50px;
}