/*@font-face {
    font-family: 'TTLaundryGothicB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
} */
    /*메뉴바 영문체 /글씨체 지정은 항상 맨 앞에-이건 기본메인글꼴*/
@font-face {
    font-family: 'Shilla_CultureB-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/Shilla_CultureB-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
} 
@font-face {
    font-family: 'PyeojinGothic-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2504-1@1.0/PyeojinGothic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}/*본문글씨(펴진고딕체)*/
@font-face {
    font-family: 'Cafe24Decobox';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-3@1.1/Cafe24Decobox.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}/*배경 포트폴리오 영문 글씨체*/
/*메뉴바 영문체 /글씨체 지정은 항상 맨 앞에-이건 기본메인글꼴*/

@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} /*footer 글씨체*/

html, body{ /*html과 body두개 다*/
    font-family: 'PyeojinGothic-Bold'; /*기본메인글씨체*/
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #F8F8E1;
    /*padding: 50px;*/
}
#container{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /*margin: 0 auto;
    width: 1700px; 밑에 카피라이트 박스 크기*/
}

.contents{
    flex: 1;
}

*{/*별표는 전체적용*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul{
    list-style: none;
}

a{
    text-decoration: none; /*탑메뉴 밑줄 안나오게*/
}

header{
    width: 100%;
    height: 100px;
}

nav{ /*이건 탑메뉴바 위치 조정*/
    float: right;
    width: 900px;
    height: 100px;
    padding-top: 40px;
    font-family: 'Cafe24Decobox'; /*메뉴바 영문 글씨체*/
}

#top_menu > li{
    float: left;
    position: relative;
}

#top_menu > li > a{
    display: block;
    padding: 20px 50px; /*탑메뉴 단어 간격*/
    color: #FF90BB; /*탑메뉴 단어 색*/
    font-size: 1.1em; /*글자 크기*/
    font-weight: 600; /*400이 기본, 글자굵기*/
    transition: transform 0.15s; /*마우스 클릭 시 바뀌는 시간*/
}

#top_menu > li > a:hover{ /*마우스 갖다댈시*/
    color: #8ACCD5; /*마우스 갖다대면 이 색으로 바뀜*/
    transform: scale(1.1); /*마우스 갖다 대면 커지는 크기*/
    text-shadow: 0 -1px #41848d; /*글자 그림자*/
}
footer{
    font-family: 'S-CoreDream-3Light';
    width: 100%;
    background-color: #82786b;
    /*position: relative;
    left: 0;
    bottom: 0;*/
    color: #FFC1DA;
    text-align: center;
    font-size: 0.7em;
    line-height: 1.8em;
    padding: 20px;
    letter-spacing: 0.07em;
} /*여기까지 다 공용*/
h2{
    font-size: 2em;
    text-align: center;
    color: white;
    text-shadow: 3px 2px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.2em;
    margin-top: 20px;
}
.main_text{
    width: 100%;
    height: 200px;
    margin: 10px auto;
    text-align: center;
    margin-top: 50px;
    font-family: 'Cafe24Decobox';
}
.main_text > p {
    font-size: 1.5em; /*영문 소제목 글자 크기*/
    color: #333;
    letter-spacing: 0.1em;
    animation: ani_title 5s;
}
.main_text > h1 {
    font-size: 3.5em;
    letter-spacing: 0.1em; /*영문 포트폴리오 글자 간격*/
    color: #333;
    margin-top: 15px; /*영문 글자간의 간격*/
    animation: ani_title 5s; /*포폴 글자 효과 나타나는 시간*/
}
.main_img{/*이미지가 들어가는 공간의 크기*/
    width: 100%;
    height: 400px;
    text-align: center;
    margin-bottom: 50px; /*이미지 밑에 공간*/
}

.main_img > img{
    width: 30%;
    height: auto;
}

.main_img > video{
    width: 35%;
    height: auto;
}
.ct_text{
    color: #FF90BB; /*메뉴에 사용한 글자색 동일하게*/
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    margin: 50px;
}
.ct_box{
    width: 400px;
    background-color: rgba(255, 255, 255, 0.5); /*255=f*/
    border-radius: 15px;
    padding: 30px;
    color: #333;
    margin: 20px auto;
    text-align: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.ct_box > p{
    font-size: 1em;
    line-height:2em;
}
.ct_img{
    width: 100%;
    height: auto;
    /*width: 700px;
    height: auto; 이미지 공간*/
    padding: 30px;
    margin: 20px auto;
    text-align: center;
}
/*.ct_img > img{
    width: 30%
    height: auto;
}*/
.ct_img > video{
    width: 36%;
    height: auto;
}

.about{/*왼/오른쪽 칼럼을 그리드로 분리*/
    display: grid;
    grid-template-columns: 1fr 1fr; /*2번을 넣으면 2개의 열이 됨*/
    gap: 20px;
    margin: 50px;
    /*height: 720px;*/
    padding: auto;
}
.left{
    grid-row: span 4;
    margin: auto;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.left > img {
    width: 250px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 30px;
}
.about_text{
    background-color: rgba(255, 255, 255, 0.2); /*마지막은 불투명도*/
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    color: #333;
    width: 350px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}
h4{
    display: block;
    padding: 5px; /*글자줄 간격*/
    font-size: 1.1em;
    font-weight: bold;
}
.vision {
    color: #FF90BB;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px;
    margin: 40px;
    text-align: center;
}
.right {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    padding: 25px; /*오른쪽 박스 글자 왼쪽 들여쓰기정도*/
    color: #333;
}
.right > h3 {
    font-size: 1.2em;
    padding-bottom: 15px;
}
.right > p {
    line-height: 1.7em;
    padding-left: 15px; /*불렛 들여쓰기*/
}

.right > span {
    display: block; /*정렬 안될 시, 이거 적용하면 될수도*/
    text-align: right;
}

.skill {
    position: relative;
    float: left; /*아이콘 왼쪽정렬*/
}
.skill > ul {
    padding: 0;
    margin: 0;
    display: flex;
}
.skill > ul > li {
    margin: 5px;
}
.skill > ul > li > img {
    width: 40%;
    height: auto;
}
#work{
    max-width: 1000px;
    margin: 20px auto;
    width: 100%;
}
.work_list{
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.work_list li{
    padding: 0;
    margin: 10px;
    overflow: hidden;
    flex-basis: calc(33.3333% - 20px); /*calc계산기*/
    position: relative;
    border-radius: 10px;
}
.work_list img{
    width: 100%;
    height: 300px; /*auto에서 300px바꾸니 300x300됨*/
    z-index: 5;
}
.work_list .caption{
    position: absolute;
    top: 200px;
    width: 100%;
    height: 100%; /*이걸로 투명배경 크기 조정 가능 예시:200px*/
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.6s ease-in-out;
    z-index: 10px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}
.work_list li:hover .caption{
    opacity: 1;
    transform: translateY(-200px) /*Y는 위아래 위치조정*/
}
.cp_title{
    color: white;
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 20px;
}
.caption > p{
    color: white;
    text-align: center;
    font-size: 1em;
    line-height: 2em;
    padding-top: 15px;
}
/*모달창을 띄어서 보여주는 work 페이지*/
.work2{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.image_box{
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 15px;
    margin: 30px;
}
.image_box img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; /*위치를 각 0을 줌으로써 겹치게 만듦*/
    transition: opacity 0.5s ease; /*서서히 변화*/
}
.image_box .hover_img{
    opacity: 0; /*이미지 안보임*/
}
.image_box:hover .hover_img{
    opacity: 1; /*이미지 보여짐*/
}
.modal{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.modal_content{
    background-color: bisque;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid burlywood;
    width: 80%;
    max-width: 600px;
}
.modal_content img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /*=가운데 정렬 이라는 뜻*/
}
.close{
    color: burlywood;
    float: right; /*오른쪽 배치*/
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}
.close:hover, .close:focus{ /*포커스는 탭키 조정*/
    color: chocolate;
    text-decoration: none;
    cursor: pointer;
}

iframe{
    border: 1px rgba(0, 0, 0, 0.2); /*solid주면 피그마창 경계선생김*/
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 1200px;
    height: 850px;
}
@keyframes ani_title {
    from{opacity: 0.0;}
    to{opacity: 1.0;}
} /*점점 나타나는 효과*/