@charset "utf-8";

body { width: 100%; height: 100%; font-family: 'Paperlogy'; background-color: #f7f6f8; color: #000000; }
button { font-family: 'Paperlogy' !important; font-weight: 400; }

#menu_list { opacity: 0; visibility: hidden; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 50px 0 50px 50px; background-color: rgba(22,21,25,.98); box-sizing: border-box; transition-duration: 0.5s; }
#menu_list .close_btn { padding-left: 7px; }
#menu_list ul { margin: 145px 0 0 20px; }
#menu_list ul li { margin-bottom: 40px; }
#menu_list ul li a { display: block; color: #ffffff; font-size: 40px; font-weight: 700; }
#menu_list .iconNinfo { height: 100%; align-content: flex-end; padding-bottom: 100px; }
#menu_list .iconNinfo .title { color: #ffffff; font-size: 14px; font-weight: 800; margin-bottom: 15px; }
#menu_list .iconNinfo dl { margin-bottom: 10px; }
#menu_list .iconNinfo dl dd { color: #ffffff; font-size: 14px; font-weight: 400; margin-left: 3px; vertical-align: middle; }
#menu_list .iconNinfo dl dt, #menu_list .iconNinfo dl dd { display: inline-block; }
#menu_list .iconNinfo dl dt img { width: 14px; }
.menu_show { opacity: 1 !important; visibility: visible !important; z-index: 9999 !important; }

/* 250414_추가 */
.imgNtxt img { border-radius: 200px; width: 200px; }

.hamburger { display: inline-block; width: 56px; height: 56px; background-color: #000000; border-radius: 50px; }
.hamburger img { position: relative; top: 33%; left: 33%; }
.pro_navfix { top: 0; position: fixed; display: flex; flex-direction: column; width: 290px; height: 100%; padding: 30px 30px 20px 30px; background-color: #ffffff; box-sizing: border-box; z-index: 1; }
.pro_navfix h1 { display: inline-block; margin-left: 20px; font-weight: 800; vertical-align: -29px; }
.pro_navfix h1 a img { width: 105px; }
.pro_navfix .imgNtxt { text-align: center; margin: 65px 0 45px 0; }
.pro_navfix .imgNtxt .name { font-size: 20px; font-weight: 800; padding-bottom: 5px; }
.pro_navfix .imgNtxt .job { font-size: 14px; }
.pro_navfix .iconNinfo { margin-bottom: 100px; }
.pro_navfix .iconNinfo dl { margin-bottom: 10px; }
.pro_navfix .iconNinfo dl dt, .pro_navfix .iconNinfo dl dd { display: inline-block; }
.pro_navfix .iconNinfo dl dd { font-size: 14px; margin-left: 3px; vertical-align: middle; }
.pro_navfix .iconNinfo dl dt img { width: 14px; }

.pro_navfix .nav_title { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.pro_navfix .skills01 { margin-bottom: 45px; }
/* 260220_추가 */
.pro_navfix .skills01 ul { display: flex; flex-wrap: wrap}
.pro_navfix .skills01 ul li { margin-right: 10px; }
.pro_navfix .skills01 ul li:last-child { margin-right: 0; }
.pro_navfix .skills02 { margin-bottom: 70px; }
/* 260220_추가 */
.pro_navfix .skills02 p { font-size: 15px; }
.pro_navfix .footer_icon { height:100%; }

/* 260220_추가 */ .pro_navfix .footer_icon ul { display: flex; justify-content: center; }
.pro_navfix .footer_icon ul li { display: inline-block; }
.pro_navfix .footer_icon ul li:first-child { margin-right: 30px; }
.pro_navfix .footer_icon img { width: 25px; }

/* main */
.mainwrap { display: flex; align-items: center; margin-left: 290px; width: max-content; max-width: calc(100% - 290px); height: 100vh; overflow: hidden; box-sizing: border-box; }
.mainwrap ul {
    height: 100%;
    max-width: max-content;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    padding: 45px 0 0 40px;
}
.swiper-slide /* .mainwrap ul li */ {
    display: flex !important;
    position: relative !important;
    width: auto !important;
    height: unset !important;
    margin-right: 40px !important;
}

.mainwrap ul li:last-child { margin-right: 0; }
.mainwrap ul li a span { color: transparent; font-size: 69px; font-weight: 900; -webkit-text-stroke: 1px #000000; }
.mainwrap ul li a dl dt { color: #000000; font-size: 40px; font-weight: 800; margin-bottom: 13px; }
.mainwrap ul li a dl dd { color: #868686; font-size: 16px; font-weight: 500; }
.thumbContainer { cursor: url('../img/cursor_effect.png') 2 2, auto; }
.thumbContainer .thumbArea { width: 421px; height: 507px; margin: 35px 0; box-sizing: border-box; }
/* 251005_메인에 블로그 주소 추가 */
.blogpf { position: absolute; top: 40px; left: 290px; margin-left: 40px; font-size: 14px; z-index: 1; }
.blogpf p { display: inline-block; margin-right: 10px; }
.blogpf span { font-weight: 600; }

/* sub */
.wrap { display: block; width: calc(100% - 290px); padding: 30px; margin-left: 290px; box-sizing: border-box; }
.sub_tab li { display: inline-block; margin-right: 10px; }
.sub_tab li a { padding: 5px 15px 6px 15px; display: block; color: #000000; font-size: 16px; font-weight: 400; border-radius: 30px; }
.sub_tab li a.active { font-weight: 500; color: #ffffff; background-color: #ff5050; }
.sub_tab li a:hover { color: #ffffff; background-color: #000000; }
.sub_tab li a.active:hover { color: #000000; box-shadow: 0 0 0 1px #000000 inset; background-color: transparent; box-sizing: border-box; }
.wrap h2 { color: #000000; font-size: 40px; font-weight: 500; margin-top: 50px; }
.sub_list_thumbnail { display: flex; flex-wrap: wrap; margin-top: 30px; }
.sub_list_thumbnail li { width: 24%; min-height: 373px; max-height: 373px; margin-bottom: 25px; margin-right: 20px; background-color: #a4a4a4; box-sizing: border-box; }
.sub_list_thumbnail li:nth-child(4n) { margin-right: 0; }
.sub_list_thumbnail li a { position: relative; display: block; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; }
.sub_list_thumbnail li a .thumb_txt { position: absolute; top: 0; left: 0; margin: 20px; display: none; flex-direction: column; justify-content: end; width: calc(100% - 40px); height: calc(100% - 40px); padding: 30px; color: #ffffff; background-color: rgba(0,0,0,.7); box-sizing: border-box; transition: all 3s ease-out; }
.sub_list_thumbnail li a .thumb_txt h3 { font-size: 30px; font-weight: 700; margin-bottom: 7px; }
.sub_list_thumbnail li:first-child a { /* background: ; 추후적용 */ }

/* sub_리스트 */
.sub_list_thumbnail li a p { height: 100%; display: flex; align-items: center; justify-content: space-around; box-sizing: border-box; }
.sub_list_thumbnail li:first-child { background-color: #e2f2fa; box-shadow: 0 0 0 1px #aad3e7 inset; }
.sub_list_thumbnail li:nth-child(2) { background: url('../img/02_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(3) { background: url('../img/03_thumb01.png') 90% 19px no-repeat; box-shadow: 0 0 0 1px #e0e0e0 inset; }
.sub_list_thumbnail li:nth-child(4) { background: url('../img/04_thumb01.png') 90% 19px no-repeat; box-shadow: 0 0 0 1px #e0e0e0 inset; }
.sub_list_thumbnail li:nth-child(5) { background: url('../img/05_thumb01.png') 0 bottom no-repeat; box-shadow: 0 0 0 1px #e0e0e0 inset; }
.sub_list_thumbnail li:nth-child(6) { background: url('../img/06_thumb01.jpg') 0 0 no-repeat; background-color: #ededed; box-shadow: 0 0 0 1px #e0e0e0 inset; }
.sub_list_thumbnail li:nth-child(7) { background: url('../img/07_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(8) { background: url('../img/08_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(9) { background: url('../img/09_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(10) { background: url('../img/10_thumb01.png') 0 0 no-repeat; background-size: cover; box-shadow: 0 0 0 1px #e0e0e0 inset; }
.sub_list_thumbnail li:nth-child(11) { background: url('../img/11_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(12) { background: url('../img/12_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(13) { background: url('../img/13_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(14) { background: url('../img/14_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(15) { background: url('../img/15_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(16) { background: url('../img/16_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(17) { background: url('../img/17_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(18) { background: url('../img/18_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(19) { background: url('../img/19_thumb01.jpg') 0 bottom no-repeat; background-size: contain; box-shadow: 0 0 0 1px #e0e0e0 inset; }
.sub_list_thumbnail li:nth-child(20) { background: url('../img/20_thumb01.jpg') 0 0 no-repeat; background-size: cover; }
.sub_list_thumbnail li:nth-child(11) a,
.sub_list_thumbnail li:nth-child(12) a,
.sub_list_thumbnail li:nth-child(20) a { padding: 0; }
.sub_list_thumbnail li:nth-child(5) a p,
.sub_list_thumbnail li:nth-child(14) a p,
.sub_list_thumbnail li:nth-child(17) a p { justify-content: flex-end; align-items: flex-start; }
.sub_list_thumbnail li:nth-child(6) a p,
.sub_list_thumbnail li:nth-child(20) a p { flex-direction: column; }
.sub_list_thumbnail li:nth-child(19) a p { margin-top: 10px; }
.sub_list_thumbnail li:nth-child(20) a p { justify-content: flex-end; align-items: baseline; }
.sub_list_thumbnail li:nth-child(6) a p img:first-child { margin-left: auto; }
.sub_list_thumbnail li:nth-child(20) a p img:first-child { padding: 0 0 45px 30px; }
.sub_list_thumbnail li:nth-child(7) img,
.sub_list_thumbnail li:nth-child(8) img { width: 100%; }
.sub_list_thumbnail li:nth-child(12) a p { align-items: flex-end; justify-content: flex-end; }
.sub_list_thumbnail li:nth-child(13) a p { align-items: baseline; justify-content: flex-start; }
.sub_list_thumbnail li:nth-child(15) a p { align-items: baseline; }

.sub_view .img_area { display: inline-block; width: 835px; }
.sub_view .img_area li { margin-bottom: 20px; background-color: #000000; }
.sub_view .img_area li:last-child { margin-bottom: 0; }
.sub_view .img_area li img { vertical-align: -webkit-baseline-middle; }
.sub_view .txt_area { display: inline-block; vertical-align: top; position: fixed; max-width: 36%; margin: 72px 0 0 50px; }
.sub_view .txt_area h2 { margin: 0 0 30px 0; font-size: 62px; font-weight: 300; color: #000000; }
.sub_view .txt_area p { overflow: auto; max-height: 242px; font-size: 16px; font-weight: 400; color: #868686; line-height: 1.2; margin-bottom: 100px; }
/* .sub_view .txt_area .txt_li { display: flex; flex-wrap: wrap; } */
.sub_view .txt_area .txt_li li { width: 100%; margin-bottom: 30px; }
.sub_view .txt_area .txt_li li dl { font-size: 16px; }
.sub_view .txt_area .txt_li li dl dt { font-weight: 600; color: #000000; margin-bottom: 6px; }
.sub_view .txt_area .txt_li li dl dd, .sub_view .txt_area .txt_li li dl dd a { font-weight: 400; color: #868686; }
.sub_view .txt_area .txt_li li dl dd a:hover { text-decoration: underline; }
.sub_view .txt_area .txt_li li dl dd .color_area li { display: inline-block; width: 12px; height: 12px; border-radius: 20px; margin-right: 5px; }
.sub_view .txt_area .txt_li li dl dd .color_area li:first-child { width: 32px; }

/* 서브공통 */
.font_black { font-weight: 700; color: #000000; }

/* 반응형 */
@media screen and (max-width:1919px) {
    .sub_list_thumbnail li { width: 30%; }
    .sub_list_thumbnail li:nth-child(4n) { margin-right: 20px; }
}

@media screen and (max-width:1470px) {
    /* 251005_메인에 블로그 주소 추가 */
    .blogpf { left: unset; top: 90px; margin-left: 20px; background-color: #f7f6f8; font-size: 12px; }
    .blogpf p { display: block; }
    .sub_list_thumbnail li:nth-child(3) p img,
    .sub_list_thumbnail li:nth-child(4) p img,
    .sub_list_thumbnail li:nth-child(7) p img,
    .sub_list_thumbnail li:nth-child(10) p img { width: 90%; }

    .sub_view { display: flex; flex-direction: column-reverse; }
    .sub_view .img_area { display: unset; width: 100%; }
    .sub_view .img_area img { width: 100%; }
    .sub_view .txt_area { display: unset; position: relative; max-width: 100%; margin: 0; }
    .sub_view .txt_area p { margin-bottom: 50px; }
}

@media screen and (max-width:1320px) {
    .sub_list_thumbnail li { width: 47%; }
    .sub_list_thumbnail li:nth-child(2n) { margin-right: 0; }
}
@media screen and (max-width:1000px) {
    .sub_list_thumbnail li { width: 100%; margin-right: 0; }
}

@media screen and (max-height:850px) {
    .pro_navfix { overflow: auto; }
}

/* 770px 이하 */
@media screen and (max-width:770px) {
    .pro_navfix .imgNtxt, .pro_navfix .iconNinfo, .pro_navfix .skills01, .pro_navfix .skills02, .pro_navfix .footer_icon { display: none; }
    .pro_navfix { width: 100%; height: 80px; padding: 13px 0 0 20px; }
    .mainwrap { position: relative; top: 80px; width: 100%; height: 100%; max-width: unset; margin-left: 0; }
    .mainwrap ul { width: 100%; max-width: unset; margin-top: 30px; padding: 0 20px; } 
    .swiper-slide /* .mainwrap ul li */ { width: 100% !important; margin-right: 25px !important; margin-bottom: 50px; }
    .mainwrap ul li a { width: 100%; margin-right: 0; }
    .mainwrap ul li .thumbArea { width: 300px; height: auto; margin: 30px 0 25px 0; }
    .mainwrap ul li .thumbArea img { display: block; width: 100%; height: auto; }
    .wrap { width: 100%; margin: 80px 0 0 0; }

    .sub_view .txt_area h2 { font-size: 42px; }
    .sub_view .txt_area .txt_li { display: block; }
    /* 260225_추가 */
    .blogpf { top: 24px; right: 20px; text-align: right; }
}

/* 2000px 이상 */
@media screen and (min-width:2000px) {
    .mainwrap ul { align-items: center; }
    .sub_list_thumbnail { justify-content: flex-start; }
}

/* 2300px 이상 */
@media screen and (min-width:2300px) {

}