@charset "utf-8";

html{width: 1920px;}
body{line-height: 30px; overflow-x: hidden;}

/* 헤더 */
.logo img{width: 200px; position: fixed; top: 3%;left: 1%; z-index: 101;}

/* 내비게이션 */
.gnb{
    position: fixed;
    right: 40px;top: 40%;
    color: #616060;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    cursor: pointer;
}
.gnb i{color: rgb(216, 8, 8);}
.gnb ul li{line-height: 40px;position: relative;}
.gnb ul li:hover, .on{
    color: #000; font-weight: bold;
}
.gnb ul li span{position:relative;z-index: 10;}
.gnb ul li::before{
    display:inline-block;
    content: "";
    background:#ff0;
    transform: scaleX(0);
    position: absolute;
    top:0px;right:0px;bottom:0px;left:0px;
    z-index: 0;
    transition: 0.5s;
    transform-origin: 0 50%;
}
.gnb ul li:hover::before{
    transform: scaleX(1);
    top:-3px;
}
@keyframes ani {
    0%{width:0px;}
    100%{width:100px;}
}

.gnb img{width: 30px; vertical-align: middle; float: left;
    position: relative;top:3px;z-index: 10;}
.act{
    opacity: 1 !important;
    visibility: visible !important;
}

/* 인트로 */
.profile1 h2{
    position: absolute;
    right: 19%; top: 17%;
    font-family: 'Nanum Pen Script';
    font-size: 80px;
    font-weight: 300;
    line-height: 80px;
}
.cooking{
    position: relative;
    top: 0; left: 0;
    width: 600px;
    height: 1000px;
}
.cooking .area{
    bottom: 0;
}
/* 후라이팬 */
.cooking .area .pan{
    position: absolute;
    bottom: 7%;
    left: 50%;
    animation: flip 2.1s ease-in-out infinite;
}
/* 고기 */
.cooking .area .beef .html{
    position: absolute;
    top: 0%; left: 61%;
    animation: jump 2.1s ease-in-out infinite;
    z-index: 101;
}
.cooking .area .beef .html img{
    width: 450px; height: 300px;
}

.cooking .sub{
    position: absolute;
    top: 0;
    /* opacity: 0; */
}

.cooking .sub img{width: 100%;}

/* 브로콜리 */
.cooking .sub:first-child{
    left: 105%;
    width: 300px;
    animation: drop 2.1s ease-in-out infinite;
    z-index: 100;
}

/* 블루베리 */
.cooking .sub:nth-child(2){
    left: 80%;
    top: 30;
    width: 300px;
    animation: drop 2.1s ease-in-out infinite;
}
/* 노랑파프리카 */
.cooking .sub:nth-child(3){
    width: 200px;
    left: 110%;
    top: 0px;
    animation: jump2 3s ease-in-out infinite;
    z-index: 100;
}

/*당근 */
.cooking .sub:nth-child(4){
    left: 55%;
    top: 30px;
    animation: drop 2.1s ease-in-out infinite;
}
/* 오이 */
.cooking .sub:nth-child(5){
    width: 130px;
    left: 58%;
    animation: jump3 2s ease-in-out infinite;
    z-index: 100;
}
/* 토마토 */
.cooking .sub:nth-child(6){
    width: 120px;
    left: 130%;
    top: 0;
    animation: star 1s infinite;
    z-index: 100;
}
/* 빨강파프리카 */
.cooking .sub:nth-child(7){
    width: 200px;
    left: 65%;
    top: 30%;
    animation: star 1s infinite;
    
}
.swing{
position: absolute;
bottom: 10%;
left: 13%;
z-index: 100;
rotate: 60deg;
animation: swing 1s infinite;
width: 180px;
}
.swing2{
    position: absolute;
    bottom: 30%; left: 30%;
    width: 100px;
    rotate: 30deg;
}


/* 인트로 애니메이션 */
@keyframes flip {
            0% {transform: rotate(0deg);    }
            30%, 50% {transform: rotate(0deg);    }
            55% {transform: rotate(27deg);    }
            100% {transform: rotate(0deg);    }
                }
@keyframes jump{
    0% {top: 24;
        transform: rotateX(85deg);}
    25% {top: 10%;
        transform: rotateX(0deg);}
    50% {top: 60%;
        transform: rotateX(85deg);}
    75% {transform: rotateX(0deg);}
    100% {transform: rotateX(85deg);}
}
@keyframes jump2{
    0% {top: 0;
        transform: rotate(360deg);}
    25% {top: 20%;
        transform: rotate(0deg);}
    50% {top: 60%;
        transform: rotate(360deg);}
    75% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes star{
    0%{opacity: 0;}
    50%{opacity: 1; rotate: -10deg;}
    100%{opacity: 0;}
}
@keyframes drop {
0% {transform: scale(0.33, 0.33);
    top: 0.5; }
50% {transform: scale(0.7, 0.7);
    opacity: 1;}
100% {transform: scale(0.15, 0.15);
    top: 50%;;
    opacity: 0;}
}
@keyframes jump3{
    0% {top: 0;}
    50% {top: 60%;}
    100% {top: 0;}
}
@keyframes swing{
    0%{rotate: 0deg;}
    50%{rotate: 50deg;}
    100%{rotate: 0deg;}
}
.scroll_btn{
    position: absolute;
    left: 52%; bottom: 7%;
    transform: translateX(-50%);
    text-align: center;
    text-transform: uppercase;
    animation: icon_ani infinite 1s;
    color: #ff4a4a;
}
.scroll_btn i{
    font-size: 24px;
    color: #ff4a4a;
    padding-bottom: 5px;
}
@keyframes icon_ani{
    0%{bottom: 7%;}
    50%{bottom: 6%;}
    100%{bottom: 7%;}
}

/* 프로필 */
.profile2{
    display: flex;
    justify-content: space-around;
    margin-bottom: 100px;
    line-height: 38px;
}

.face img:first-child{
position: absolute;
bottom: 36%; right: 16.2%;
scale: 2;
}
#chef{
    position: absolute;
    right: 13.1%; bottom: 50.3%;
    width: 100px;
    z-index: 11;
}

.face_info{
    position: absolute;
    bottom: 20%;
    right: 15.1%;
    text-align: center;
    z-index: -10;
    scale: 1.5;
}
#f_b{
    position: absolute;
    right: 27%;
    bottom: 40%;
    scale: 1.5;
}
.f_b_t{
    position: absolute;
    right: 26.5%;
    bottom: 42.5%;
    font-size: 30px;
    font-family: 'Nanum Pen Script';
}
.m_o{font-size: 22px;}
.profile_img2{
    position: relative;
    top: 100px; left: 10%;
}
.profile_img2 img{
    width: 450px;}
.img2_bg{
    position: absolute;
    background: rgb(252, 164, 164);
    width: 1054px; height: 600px;
    top: -90px; left: -700px;
    z-index: -10;
}
.mbti{position: absolute; top: 260px; left: -343px; font-size: 200px; rotate: -30deg; color: #cc8484;}
.profile_text{
    width: 800px;
}
.profile_text div dl{text-indent: 15px;}
.profile_text div h3{color: rgb(8, 8, 139); font-size: 20px;}
.about_text dl, .education dl, .certi dl, .career dl{
    display: flex;
}
.skill_text img{
    width: 45px; height: 50px; padding-right: 10px; margin-left: 15px;
}
.about_text{width: 800px; display: flex; flex-flow: row wrap;}
.about dl{width: 50%;}
.about_text dl{display: flex; flex-flow: row wrap;}
.about_text dl dt{padding-right: 20px; font-weight: 600;}

/* 메인페이지 */
section{padding: 140px 0px 100px 0px;}
section:first-child{padding: 0px;}
.bg_box{
    position: relative;
    margin: 0px auto;
    padding: 0px;

}
.menu_bg{
    width: 100%;
    height: 370px;
    position: absolute;
    top: 210px;
    z-index: -100;
}
.menu1_bg{background: #FFED5A;}
.menu2_bg{background: #ff5207;}
.menu3_bg{background: #E98300;}
.menu4_bg{background: #4DAC27;}
.menu5_bg{background: #e60019;}
.menu6_bg{background: #979595;}
.gallery_bg{background: #fabcbc; height: 400px;}

.menu1{
    /* padding-top: 200px; */
    height: 650px;
    /* display: flex;
    justify-content: center; */
}
.mockup{
    position: relative;
    left: 150px;
}
.mockup img{
    /* width: 800px; */
}
.menu1_text{
    position: absolute;
    right: 200px;
    width: 600px;
    line-height: 35px;
}
.menu_name, .gallery h2{
    font-family: "Protest Riot";
    font-size: 30px;
    color: rgb(216, 8, 8);
}
.title{
    font-weight: bold;
    font-size: 20px;
}
.taste{font-weight: bold; padding:10px ;}
.fa-cookie-bite{color: brown;}
table{
    width: 600px;
    text-align: center;
    font-size: 14px;
}
table thead{background: rgb(216, 8, 8); color: #fff;}
table th, table td{padding: 3px 0px 3px 0px; border:1px solid rgba(255,255, 255, 0);}

tbody tr td{font-weight: bold; background: #fff;}
tbody tr td:nth-child(2) a{color: rgb(141, 7, 7); }
.show{background: #7e7d7d; color: #fff; font-weight: bold; padding: 8px 20px; border-radius: 60px;}
.show:hover{background: #333; color: rgb(250, 214, 12);}

#num_cor1{
    background: #FFF7BB;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    }
#num_cor2{
    background:#FBB90E ;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
}
#num_cor3{
    background: #f05323;
    padding: 13px;
    border-radius: 50%;;
    font-size: small;
}

.mock_tool{
    width: 550px; height: 300px;
    position: absolute;
    top: 10px;left: 100px;
    z-index: 10;
}
.mock_ta{
    width: 200px; height: 100px;
    position: absolute;
    top: 190px; left: 550px;
    z-index: 11;
}
.mock_mo{
    width: 130px; height: 200px;
    position: absolute;
    top: 220px; left: 5px;
    z-index: 10;
}

.num_mock{width: 100%;}
.numta_mock{width: 100%;}
.nummo_mock{width: 100%;}

.num_tool{
    position: absolute;
    top: 63px; left: 150px;
    width: 460px; height: 300px;
    overflow: hidden;
}
.num_mock_pc, .dw_mock_pc, .kb_mock_pc, .ha_mock_pc, .chuk_mock_pc, .edu_mock_pc{
    position: absolute;
    top: 0px;left: 0px;
    width: 100%;
}
.num_tool_ta{
    position: absolute;
    top: 194px; left: 550px;
    width: 183px; height: 227px;
    overflow: hidden;
    z-index: 10;
}
.num_mock_ta, .dw_mock_ta, .ha_mock_ta{
    position: absolute;
    top: 0px; left: 17px;
    width: 100%;
}
.edu_mock_ta{position: absolute; top: 0; left: 17px; width: 100%; height: 100%;} 
.num_tool_mo{
    position: absolute;
    top: 231px; left: 26px;
    width: 90px; height: 195px;
    overflow: hidden;
}
.num_mock_mo, .dw_mock_mo, .kb_mock_mo, .ha_mock_mo, .chuk_mock_mo{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
}
/* 축지법 */
.team_txt{color: #fff;}
#chuk_cor1{
    background: #f05323;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #fff;
    }
#chuk_cor2{
    background: #FCE0DE;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #333;
    }
/* 대웅제약 */
#dw_cor1{
    background: #E98300;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #fff;
    }
#dw_cor2{
    background:#565A5C ;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #fff;
}

/* 교보문고 */
#kb_cor1{
    background: #4DAC27;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #fff;
    }
#kb_cor2{
    background:#525d9f;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #fff;
}

/* 하림펫푸드 */
#ha_cor1{
    background: #e60019;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #fff;
    }
#ha_cor2{
    background:#4b4b4b;
    padding: 13px;
    border-radius: 50%;
    font-size: small;
    color: #fff;
}

/* 갤러리 */
.gallery{padding-top: 30px; padding-bottom: 0px;}
.gallery h2{text-align: center; padding-bottom: 60px;}

.g_all{display: flex; width: 830px; margin: 0px auto; padding-bottom: 30px;}

.gallery ul li{width: 280px; overflow: hidden; position: relative;}
.gallery ul li a img{object-fit: cover;}

.g_1 > li:first-child{height: 130px;}
.g_1 > li:first-child img{transform: translate(-300px, -50px);}
.g_1 > li:nth-child(2){height: 200px;}
.g_1 > li:nth-child(2) img{transform: translate(-80px, -70px);}
.g_1 > li:last-child{height: 210px;}
.g_1 > li:last-child img{transform: translate(-120px, -70px);}


.g_2 > li:first-child{height: 150px;}
.g_2 > li:first-child img{transform: translate(-110px, -40px);}
.g_2 > li:nth-child(2){height: 200px;}
.g_2 > li:nth-child(2) img{transform: translate(-10px, -100px);}
.g_2 > li:last-child{height: 240px;}
.g_2 > li:last-child img{transform: translate(-160px, -10px);}


.g_3 > li:first-child{height: 230px;}
.g_3 > li:first-child img{transform: translate(10px, -50px);}
.g_3 > li:nth-child(2){height: 150px;}
.g_3 > li:nth-child(2) img{transform: translate(-140px, -115px);}
.g_3 > li:last-child{height: 150px;}
.g_3 > li:last-child img{transform: translate(-150px, -80px);}



.g_txt{
    background: rgba(0,0,0,.7);
    display: block;
    line-height: 50px;
    position: absolute;
    bottom: -50px; left: 0px;
    width: 320px; height: 50px;
    color: #fff;
    font-size: 15px;
    padding-left: 10px;
}

/* 갤러리 모달창 */

.modal{
    width: 1000px;
    height: 600px;
    position: fixed;
    top: 20%;left: 25%;
    background: rgba(0,0,0,.8);
    text-align: center;
}
.modal .center > img{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.modal .center .fas{
    font-size: 25px;
    color: #fff;
    position: absolute;
    top: 10%;left: 80%;
    cursor: pointer;
}
.modal .center h3{
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 5%; left: 50%;
    transform: translateX(-50%);
}

/* 탑버튼 */
.top{
    position: fixed;
    right: 70px; bottom: 10%;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    z-index: 10;
    }
    .top img{width: 70px;}

.top:hover{filter: brightness(1.3);}


/* 푸터 */
footer{
    background:#FCA4A4;
    z-index: 10;
    color: #fff;
    }
footer a{color: #fff;}
footer .edu{background: #7e7d7d; font-family: '"Protest Riot"';}
footer .edu ul{display: flex;}
footer .edu ul li{padding: 10px; font-size: 15px;}
footer .edu ul li:first-child{font-size: 20px; color: #FFED5A;}
footer .edu ul li a:hover{color: #FFED5A; font-weight: bold;}
footer .contact h3{font-size: 30px; line-height: 50px;}

footer .contact dl{display: flex; border: 1px solid #fff;}
footer .contact dl dt{padding: 0px 10px 0px 20px; font-weight: bold;}

footer address{font-style:normal;}
.f_bottom{display: flex; justify-content: space-between; color: #333; font-size: 12px; padding: 0px 20px 0px 20px;}


/* 팝업모달창 */
.p_modal {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
position: fixed;
top: 0px;
left: 0px;
text-align: center;
z-index: 9999;
}
.p_modal > .banner{
width: 400px;
padding: 10px;
border-radius: 10px;
background: #fff;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
line-height: 40px;
}
.p_modal > .banner h2{font-size: 26px; color: red; padding-bottom: 20px;}
.p_modal > .banner span{font-size: 14px; text-decoration: underline; }
.p_modal .banner label {
color: #000;
font-size: 13px;
line-height: 30px;
}
.p_modal input[type=checkbox]+label {
margin-right: 200px; cursor: pointer;
}
.p_modal input{cursor: pointer;}