#h_bg {
    background:#ecccbd;
    width: 100%; height: 100vh;
}
header, main > div > * , footer > div {width: 1400px; margin:0 auto;}
header {}
/* top_box */
header .open_box {}
header .height_box {
    height: 100vh; width: 30%; background-color:#f5dbcf; position: relative; z-index: 55; animation: colorbox_ani1 0.5s linear;
}
header .width_box {
    width: 100%; height: 100px; background:#e76752; position:absolute; bottom:5%;
    left: 0%; z-index: 10; animation: colorbox_ani2 0.5s linear;
}
header .width_box2 {
    height: 20px; background:#eee; position:absolute; bottom: 2%;
    left: 0%; z-index: 5;
}
/* header .open_box span {
    display: inline-block; width: 100px; height: 5px; background:#333;
    margin:0 100px;
} */
/* header .open_box .left {animation:left_ani 0.5s both;}
header .open_box .right {animation:right_ani 0.5s both;} */
/* txt */
header .txt {
    justify-content: center;
    display: flex; padding-top:8%; 
    position:absolute; top:0; left:15%; z-index: 99;
    animation: h_txt_ani 0.7s 1s both;
}
header .txt > p {border:2px solid #000;}
header .txt .t1 {
    /* animation: h_txt_ani 0.7s 0.5s both; */
    width: 80px; height: 80px; animation: box_ani 3s linear infinite;
}
header .txt .box2 {width: 50px; height: 50px; margin-top:50px; margin-left:-20px; animation: box_ani 4s linear infinite;}
header .txt .long_t {/* display: flex;  */width: 230px; margin-top:30%; margin-left: -10%;}
header .txt .long_t p {}
header .txt .long_t p img {width: 100%;}
header .txt .t2 {font-size: 1.3rem; font-weight:600; padding-top:7%;}
header .txt .t3 {font-size: 4.2rem; font-weight:500; letter-spacing: -1.5px; }
header .txt .t4 {margin-top:10px; text-align: end; letter-spacing: -0.7px; font-weight: 500;}
header .index {text-align: end;}
header .index p {}
header .index .index_title {font-size: 1.3rem; font-weight: 600; margin:290px 0 10px;}
header .index .index_info {font-weight: 600; padding:2px 0; font-size: 1.1rem;}
header .index .index_info span {line-height: 1.3; margin-top:5px; display: block; font-size: 0.9rem;}
/* foot */
.foot {margin-left:-10%;} 
.foot p {} 
.foot p img {} 
.foot .f1 {animation: foot_ani 0.5s 1s both;} 
.foot .f2 {padding-left: 50px; animation: foot_ani 0.5s 1.5s both;} 
.foot .f3 {padding-left: 20px; animation: foot_ani 0.5s 2s both;} 
.foot .f4 {padding-left: 80px; animation: foot_ani 0.5s 2.5s both;} 
/* ani */
@keyframes colorbox_ani1 {
    0% {transform:translateY(-200%);}
    100% {transform:translateY(0%);}
}
@keyframes colorbox_ani2 {
    0% {transform:translateX(-200%);}
    100% {transform:translateX(0%);}
}
@keyframes h_txt_ani {
    0% {transform: translateY(-100px); opacity: 0;}
    0% {transform: translateY(100); opacity: 0;}
}
@keyframes foot_ani {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* main */
main div h1 {font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 700;}
main {}
main .me_bg {
    /* background-image:url(../images/intro.jpg); */
    background-color: #ecccbd;
}
main .me_bg .me {
    /* padding:0 0 40px 100px;  */
    position:relative;
    background-image: url(../images/intro_me.jpg);
    background-repeat: no-repeat;
    background-position:right;
}
main .me_bg .me h1 {font-size: 1.5rem;}
main .me_bg .me .me_contents {
    display: flex; justify-content: center; flex-flow:column;
    padding-left: 100px;
}
/* 공통 */
main .me_bg .me .me_contents > div {
    flex:1;
    margin:30px 0; /* background:pink; */
}
main .me_bg .me .me_contents > div h2 {font-size: 1.3rem; padding:10px 0; } 
main .me_bg .me .me_contents > div h2 span {
    display: inline-block; width: 15px; height: 15px; border:2px solid #000;
    animation: box_ani 3s linear infinite;
}
main .me_bg .me .me_contents > div ul {}
main .me_bg .me .me_contents > div ul li {
    padding:5px 0 5px 20px; line-height: 1.5;
}
main .me_bg .me .me_contents > div ul li span {}
/* ani */
@keyframes box_ani {
    0% {transform: rotate(0);}
    100% {transform: rotate(365deg);}
}
/* 개별 */
main .me_bg .me .me_title {padding-top:100px;}
/* 1 */
main .me_bg .me .introduce {
    position:absolute; top:310px; right:137px;
    animation:intro_move 0.5s linear both infinite alternate-reverse;
}
@keyframes intro_move {
    0% {transform: translateY(-10px);}
    0% {transform: translateY(10px);}
}
main .me_bg .me .introduce img {}
/* main .me_bg .me .introduce h2 {}
main .me_bg .me .introduce ul {}
main .me_bg .me .introduce ul li {} */
/* 2 */
main .me_bg .me .education {}
main .me_bg .me .education h2 {}
main .me_bg .me .education ul {}
main .me_bg .me .education ul li { display: flex; margin:10px 0;}
main .me_bg .me .education ul li span {padding-right: 20px;}
main .me_bg .me .education ul li p {
    /* line-height: 1.5; */ letter-spacing: -0.5px;
}
main .me_bg .me .education ul li p span {line-height: 2.0;}
/* 3 */
main .me_bg .me .license {}
main .me_bg .me .license h2 {}
main .me_bg .me .license ul {}
main .me_bg .me .license ul li {display: flex; margin:10px 0;}
main .me_bg .me .license ul li span {padding-right: 20px;}
main .me_bg .me .license ul li p { letter-spacing: -0.5px;}
/* 4 */
main .me_bg .me .use_tool {width: 25%;}
main .me_bg .me .use_tool h2 {}
main .me_bg .me .use_tool ul {display: flex; flex-flow: row wrap; }
main .me_bg .me .use_tool ul li {margin:10px;}
main .me_bg .me .use_tool ul li p {width: 60px;}
main .me_bg .me .use_tool ul li p img {width: 100%;}
/* skill */
main .skill {padding:30px 0 70px; background:#ecccbd;}
main .skill h1 {color:#000; font-size: 1.7rem; padding:30px 0; text-align: center;}
main .skill .skill_box {
    display: flex; justify-content: space-around;
}
main .skill .skill_box .skill_contents {display: flex; flex-flow: column; align-items: center;}
main .skill .skill_box .skill_contents h2 {
    padding:20px 0; color:#000; text-align: center;
}
.circular {
    height:100px; width:100px; /*스킬바 로딩 크기*/
    position:relative;
}
.circular .inner {
    position:absolute; z-index:6;
    top:50%; left:50%; 
    height:60px; width:60px; /*스킬바 두께*/
    margin:-30px 0 0 -30px; /*두께에 따른 -여백 조정*/
    background:#ecccbd;
    border-radius:50%;
}
.circle .bar {
    position:absolute; 
    height:100%; width:100%;
    background:#eee; /*원 배경*/
    border-radius:50%;
    clip:rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
    position:absolute; height:100%; width:100%;
    border-radius:50%; 
    clip:rect(0px, 50px, 100px, 0px);
    background:#e76752; /*애니메이션 공통 배경*/
}
.circle .left {transform:rotate(0deg)} /*왼쪽 반원 위치 설정*/
/* .circle .left .progress {animation:left 1s linear both;} */
.circle .right {transform:rotate(180deg)} /*오른쪽반원 위치 설정*/
/* .circle .right .progress {animation:right 0.5s linear both 1s;} */
/* .circle .right .skill1 {animation:right1 0.5s linear both 1s;}
.circle .right .skill2 {animation:right2 0.5s linear both 1s;}
.circle .right .skill3 {animation:right3 0.5s linear both 1s;}
.circle .right .skill4 {animation:right4 0.5s linear both 1s;}
.circle .right .skill5 {animation:right5 0.5s linear both 1s;} */

@keyframes left { /*왼쪽 반원 애니메이션 키프레임*/
    0% {transform:rotate(0deg)}
    100% {transform:rotate(180deg)} /*0~50% 설정*/
}
/* right */
@keyframes right1 { /*오른쪽 반원 애니메이션 키프레임*/
    0% {transform:rotate(0deg)}
    100% {transform:rotate(120deg)} /*50~100% 사이 값 설정) */
}
@keyframes right2 { /*오른쪽 반원 애니메이션 키프레임*/
    0% {transform:rotate(0deg)}
    100% {transform:rotate(70deg)} /*50~100% 사이 값 설정) */
}
@keyframes right3 { /*오른쪽 반원 애니메이션 키프레임*/
    0% {transform:rotate(0deg)}
    100% {transform:rotate(100deg)} /*50~100% 사이 값 설정) */
}
@keyframes right4 { /*오른쪽 반원 애니메이션 키프레임*/
    0% {transform:rotate(0deg)}
    100% {transform:rotate(80deg)} /*50~100% 사이 값 설정) */
}
@keyframes right5 { /*오른쪽 반원 애니메이션 키프레임*/
    0% {transform:rotate(0deg)}
    100% {transform:rotate(90deg)} /*50~100% 사이 값 설정) */
}
/* project intro */
main .p_intro {
    align-items: center;
    background:#ecccbd;
    text-align: center;
    padding-bottom: 20px;
}
/* main .p_intro .p_intro_bg {
    text-align: center;
    background:#000; color:#ecccbd;
    width: 230px; padding:10px 0;
} */
main .p_intro p {font-size: 1.2rem; letter-spacing: -0.7px; padding-bottom:20px; }
main .p_intro .p_intro_img {
    width: 20px; animation:intro_move 0.5s linear both infinite alternate-reverse;
}
main .p_intro .p_intro_img img {width: 100%;}
/* project */
main .project_bg {padding-top:100px; background:#f5dbcf;}
main .project_bg .tab_title {text-align: center;}
main .project_bg .tab_title a {
    padding:20px 30px; margin:0 10px; border:1px solid #000;
}
main .project_bg .tab_title a:hover {
    background:#000; color:#fff;
    transition:background 0.7s;
    transition:color 0.5s; box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
main .project_bg .tab_contents {
    /* position:relative; height:600px; */
}
main .project_bg .tab_contents > .tab {
    /* position:absolute; left:0; top:0;*/ width: 100%;
}
main .project_bg .tab_contents > .tab h2 {font-size: 1.5rem; padding-top:30px}
main .project_bg .tab_contents > .tab > .project {
    display: flex; justify-content: space-between; padding-top:30px;
    flex-flow: row wrap;
}
main .project_bg .tab_contents > div > .project a {
    background-size: 100% auto; background-position: center top;
    margin:20px;
}
main .project_bg .tab_contents .tab h2 {font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 700; font-size: 1.8rem;}
main .project_bg .tab_contents .tab_web {}
main .project_bg .tab_contents .tab_web h2 {}
main .project_bg .tab_contents .tab_web .web {padding:30px 0 150px;}
main .project_bg .tab_contents .tab_web .web a {
    width: 30%; height: 250px; position:relative;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
main .project_bg .tab_contents .tab_web .web a:nth-child(1) {
    background-image: url(../images/project4.png);
}
main .project_bg .tab_contents .tab_web .web a:nth-child(2) {
    background-image: url(../images/project1.png);
}
main .project_bg .tab_contents .tab_web .web a:nth-child(3) {
    background-image: url(../images/project2.png);
}
main .project_bg .tab_contents .tab_web .web a:nth-child(4) {
    background-image: url(../images/project3.png);
}
/* info올려야 나옴 */
main .project_bg .tab_contents .web a .info {
    background:rgba(0,0,0,0.5); width: 100%; height: 100%;
    position:absolute; left:0; top:0; text-align: center;
    display: block; color:#fff;
    opacity: 0;
    transition:opacity 0.5s; border-radius: 10px;
}
main .project_bg .tab_contents .tab_web .web a:hover .info {opacity: 1;}
main .project_bg .tab_contents .web a .info p {
    padding-top:80px; line-height: 1.8;
    font-family:'Noto Sans KR', sans-serif;
}
main .project_bg .tab_contents .web a .info1 {}
main .project_bg .tab_contents .web a .info2 {}
/* detail */
main .project_bg .tab_contents .tab_details {padding-bottom: 100px;}
main .project_bg .tab_contents .tab_details h2 {}
main .project_bg .tab_contents .tab_details .detail {}
main .project_bg .tab_contents .tab_details .detail a {
    width: 20%; height: 180px;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
main .project_bg .tab_contents .tab_details .detail a:hover {opacity: 0.7;}
main .project_bg .tab_contents .tab_details .detail a:nth-child(1) {background-image: url(../images/subway.jpg);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(2) {background-image: url(../images/tea3.jpg);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(3) {background-image: url(../images/gudal.jpg);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(4) {background-image:url(../images/book.jpg);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(5) {background-image: url(../images/project2_p_s_1.jpg);}

main .project_bg .tab_contents .tab_details .detail a:nth-child(6) {background-image: url(../images/0808_mask_white.jpg);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(7) {background-image: url(../images/30inbox.png);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(8) {background-image: url(../images/pouch_w.png);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(9) {background-image: url(../images/240812_1.png);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(10) {background-image: url(../images/yepevent_1.png);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(11) {background-image: url(../images/24062p_e1.png);}
main .project_bg .tab_contents .tab_details .detail a:nth-child(12) {background-image: url(../images/quad_page.png);}
/* footer */
footer {
    height: 70px; border-top:1px solid #ddd; display: block;
}
footer p {font-size: 1.2rem; font-weight: 600; text-align: center; padding-top:25px;}
/* project:popup */
/* detail a 클릭시 나오는 화면 */
.detali_big_wrap {
    position:fixed; left:0; top:0; width: 100%; height: 100vh; z-index: 999;
    background-color: rgba(0,0,0,0.7); overflow: auto;
}
.detali_big_wrap .big {
    text-align: center;  overflow: auto; height: 95vh; margin-top:30px;
}
.detali_big_wrap .big5 img,.detali_big_wrap .big6 img,.detali_big_wrap .big7 img {width: 1200px;}
.detali_big_wrap .big .close {
    position:fixed; right:10%; top:50px;
    padding:10px; background:rgba(0,0,0,0.3);
    border-radius: 10px;
}
.detali_big_wrap .big .close span {width: 30px; height: 30px; display: block; position:relative; top:13px;}
.detali_big_wrap .big .close span::before,
.detali_big_wrap .big .close span::after { 
    content: ''; display: block; width: 100%; height: 3px;
    background:#fff; position: absolute;
}
.detali_big_wrap .big p {background-color: #000; color:#eee; font-weight: 500; padding:10px 0; opacity: 70%;}
.detali_big_wrap .big .close span::before{transform:rotate(45deg);}
.detali_big_wrap .big .close span::after{transform:rotate(-45deg);}
.detali_big_wrap .big img {
    width: 30%; display:inline-block; margin:20px 50px 70px;
    vertical-align: top;
}
/* .detali_big_wrap .big5 img:nth-child(5) {width: 25%; margin:0 250px 0 50px;} */
/* 홈페이지 탭 */
.detali_big_wrap .big13 {position: relative;}
.detali_big_wrap .big13 a {
    background-color: #ffd343; padding: 20px 30px; border-radius: 50%;
    font-size: 0.875rem; line-height: 1.2; font-weight: 700; color:#3e3a39;
    position: fixed; bottom:10%; left: 20%; 
}
.detali_big_wrap .big13 a em {color:#e76752; font-weight: 900;}
.detali_big_wrap .big13 a:hover {opacity: 0.7;}