@charset "utf-8";

@font-face {
    font-family: 'TTTogether';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 10px auto;
    /* background-color: orange; */
}

h2 {
    margin-top: 300px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgb(97, 96, 96);
}
h3 {
    margin-top: 20px;
}

/* ========== header 영역 ========== */
header {
    width: 100%;
    background-color: black;
}
.logo-gnb-box { /* 로고와 메뉴를 감싼 박스 */
    display: flex; /* 로고와 메뉴 가로로 배치 */
    height: 130px;
    justify-content: space-between; 
    align-items: center;
}
.logo {
    margin-left: 20px;
}
.main-menu > #gnb { /* 주메뉴 */
    display: flex;
    justify-content: space-between;
    width: 600px;
    /* background-color: pink; */
}
.main-menu > #gnb a { 
    color: white;
    font-size: 26px;
}

/*** 메뉴 아래 바 애니메이션 ***/
.main-menu > #gnb a::after { /* 가상 공간 생성 */
    display: block;    
    content: '';
    clear: both;
    height: 2px;
    background-color: white;

    width: 100%;
    transform: scaleX(0);

    transition: all 0.5s; /* 애니메이션 */
}
.main-menu > #gnb a:hover {
    font-weight: bold;
}
.main-menu > #gnb a:hover::after { 
    transform: scaleX(1);
}


/* ========== main 영역 ========== */
main {
    width: 100%;
}
article > h2 {
    font-size: 0;
    margin-top: 0; /* 공통 h2에 들어가 마진 해제 */
    margin-bottom: 0; /* 공통 h2에 들어가 마진 해제 */
}
article video {
    width: 100%;
}


/*****== profile ==*****/
.profile-vision {
    width: 100%;
    border-radius: 30px;
    color: white;
    background-color: black;
}
.img-profile-box {
    display: flex;
}
.img-profile-box > img {
    flex: 1;
    border-radius: 30px;
    margin-right: 20px;
    width: 200px;
}
.img-profile-box > .info {
    flex: 1;
    padding: 50px;
}
.img-profile-box > .info li:nth-child(1) > p.desc {
    font-size: 24px;
    background-color: red;
}

/*** vision ***/
.vision .vision-list {
    padding: 50px;
    color: white;
}
.vision .vision-list h3 {
    margin-bottom: 20px;
}
.vision .vision-list > li > p {
    font-size: 20px;
    margin-bottom: 60px;
}
.vision .vision-list > li:last-child > p {
    margin-bottom: 0;
}


/*****== skill ==*****/
.skill {
    width: 100%;
    height: 700px;
    margin-bottom: 300px;
}
.skill .skill-title {
    margin-top: 100px;
}
.skills {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 700px;
    background-size: cover;
    margin-bottom: 300px;
}
.skills > div {
    display: flex;
    align-items: center;
    width: 50%;
}
.skills > div > img {
    width: 150px;
    height: 150px;
    margin-right: 20px;
}
/* skill bar */
.skills > div > .bar {
    position: relative;
    width: 350px;
    height: 30px;
}
.skills > div > .bar > .gauge {
    display: none;
    width: 60px;
    height: 36px;
    border-radius: 18px;
    background-color: black;
}
.skills > div > .bar > .gauge-txt {
    position: absolute;
    left: 15px; top: 6px;
    display: block;
    color: white;
    font-size: 20px;
    font-weight: bold;
    z-index: 1;
}


/*****== portfolio ==*****/

/***  mv-list 영역 ***/
.portfolio .MV-portfolio > h3 {
    margin-top: 150px;
}
.portfolio .MV-portfolio > .mv-list > li {
    display: flex;
    margin-bottom: 150px;
} 
.portfolio .MV-portfolio > .mv-list > li > video {
    width: 700px;
    height: 450px;
}
/* .portfolio .MV-portfolio {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    position: relative;
}
.portfolio .MV-portfolio iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
    */
.portfolio .MV-portfolio > .mv-list > li > .mv-txt {
    width: 40%;
    padding: 30px;
    /* background-color: skyblue; */
}
.portfolio .MV-portfolio > .mv-list > li:nth-child(even) > .mv-txt { /* 짝수 번째 텍스트 박스의 텍스트는 오른쪽 정렬 */
    text-align: right;
}
.portfolio .MV-portfolio > .mv-list > li > .mv-txt > strong {
    color: rgb(43, 43, 43);
    font-size: 32px;
    margin-bottom: 20px;
}
.portfolio .MV-portfolio > .mv-list > li > .mv-txt > p {
    font-size: 20px;
}
.portfolio .MV-portfolio > .mv-list > li > .mv-txt > .img-box { /* 이미지 공통 오른쪽 정렬 */
    text-align: right; 
    /* background-color: pink; */
}
.portfolio .MV-portfolio > .mv-list > li:nth-child(even) > .mv-txt > .img-box { /* 짝수 번째 이미지는 왼쪽 정렬 */
    text-align: left;
    /* background-color: pink; */
}
.portfolio .MV-portfolio > .mv-list > li > .mv-txt > .img-box > img { /* 이미지 공통 크기 200px */
    width: 200px;
    margin-top: 20px; /* 이미지 위에 여백 넣어 텍스트와 간격 띄우기 */
}
.portfolio .MV-portfolio > .mv-list > li:first-child > .mv-txt > .img-box > img { /* 첫 번째 이미지만 130px */
    width: 130px;
}


/*** design-portfolio 영역 ***/
.portfolio .Design-portfolio > h3 {
    margin-top: 100px;
}
.portfolio .Design-portfolio > .Design-list {
    display: flex; /* 디자인 리스트 가로 배치 */
    justify-content: space-between;
    /* background-color: lightgreen; */
}
.portfolio .Design-portfolio > .Design-list > li {
    width: 48%;
}
/* 이미지 박스 */
.portfolio .Design-portfolio > .Design-list > li > .img-box { 
    width: 100%;
    height: 324px;
    margin-bottom: 20px;
    overflow: hidden; /* 박스 크기를 벗어난 내용물 가리기 */
}
.portfolio .Design-portfolio > .Design-list > li > .img-box > img {
    width: 100%;
}
/* 텍스트 박스 */
.portfolio .Design-portfolio > .Design-list > li > .design-txt { 
    text-align: center;
}
.portfolio .Design-portfolio > .Design-list > li > .design-txt > strong {
    text-align: center;
    color: rgb(99, 99, 99);
    font-size: 28px;
    margin-bottom: 20px;
} 
/* btn-box */
.portfolio .Design-portfolio > .Design-list > li > .btn-box { 
    width: 150px;
    margin: 0 auto; /* 버튼 박스 가운데 정렬 */

}
.portfolio .Design-portfolio > .Design-list > li > .btn-box > a {
    width: 150px; height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 10px;
    color: black;
    border: 2px solid black;
    margin-top: 20px;
    margin-bottom: 200px;
} 
.portfolio .Design-portfolio > .Design-list > li > .btn-box > a:hover {
    color: white;
    border: 2px solid rgb(99, 99, 99);
    background-color: rgb(99, 99, 99);
}



/* ========== footer 영역 ========== */
footer {
    position: relative;
    width: 100%;
    color: white;
    background-color: black;
}
.logo-info-sns {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: space-between;
    color: white;
}
.logo-info-sns > .info > .email {
    font-size: 30px;
}
.logo-info-sns > .info > .comment {
    font-size: 50px;
    font-weight: bold;
}
.logo-info-sns > .sns {
    display: flex;
    width: 140px;
    justify-content: space-between;
    /* background-color: red; */
}
.logo-info-sns > .sns img:hover {
    opacity: 0.5;
}

/* TOP 고정 버튼 */
#top-btn .page-top {
    width: 80px;
    height: 80px;
    position: fixed;
    right: 40px;
    bottom: 40px;
    color: #73ac59;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 75px !important;
    font: normal 20px "TTTogether";
    text-transform: lowercase;
    transition: all .8s;
}
#top-btn .page-top:hover {
    animation: btn-top 3s infinite;
    color: #ffffff;
    background: #73ac59;
}