html,body * {
    scroll-behavior: smooth;
}
/* ----------------------------------------------------헤더 */
header {
    background:#000; 
    display:flex; justify-content:space-between; 
    padding:15px; 
    position:absolute; top:0; left:0; z-index:900;
    width:100vw;
}
header nav {display:flex; gap:30px;}
header nav a {color:#fff;}
header p {color:#fff;}

#wrap {height:100vh;}
#wrap .swiper-wrapper {}
#wrap .swiper-wrapper .swiper-slide {/* display:flex; align-items:center; */}
/* ----------------------------------------------------1행 인트로 */
#wrap .swiper-wrapper .intro {
    background:url();
    background:#000;
    /* animation:introBg 2s; */
}
#wrap .swiper-wrapper .intro video {/* 만약 비디오를 넣는다면 */ width:100%;}
#wrap .swiper-wrapper .intro .intro_wrap {
    width:1620px; margin:0 auto; text-align:center;
}
#wrap .swiper-wrapper .intro .intro_wrap .sub_title {
    color:#fff; opacity:1; 
    /* font-size:3.125rem;animation:introNum 1s linear 1s both; */
    display:flex; align-items:center; gap:50px; justify-content:center;
    position:absolute; top:100px; left:50%;
    transform: translateX(-50%);
    animation:shadow 2s infinite;
}
#wrap .swiper-wrapper .intro .intro_wrap p span {color:#fff; font-size:3.125rem; font-weight:700;} 
#wrap .swiper-wrapper .intro .intro_wrap #typing {
    font-size:9.375rem; font-weight:700;
    color:#fff; opacity:1;
    /* animation:introH1 1s linear 1.5s both; */
    /* margin-top:330px; */
    
}
#typing::after {/* 타이핑 효과 */
    content: "|";
    animation: blink 0.7s infinite;
}
#wrap .swiper-wrapper .swiper-slide {display:flex; align-items:center;}
/* ----------------------------------------------------2행 프로필 */
#wrap .swiper-wrapper .profile {display:flex; align-items:center;}
#wrap .swiper-wrapper .profile .container {
    display:flex; justify-content:space-between; align-items:center;
    width:1620px; margin:0 auto 0; height:549px;
}
#wrap .swiper-wrapper .profile .container .photo_info {text-align:center; height:100%;}
#wrap .swiper-wrapper .profile .container .photo_info h2 {
    font-family: "Baloo Bhai 2", sans-serif; font-size:2.5rem; font-weight:700;
    margin-bottom:30px;
}
#wrap .swiper-wrapper .profile .container .photo_info .my_img {/* 이미지가 들어갈 공간 */ width:200px; height:300px; margin:30px 0; margin:0 auto;}
#wrap .swiper-wrapper .profile .container .photo_info .my_img img {width:100%;  display:block;}
#wrap .swiper-wrapper .profile .container .photo_info .my_info {display:flex; flex-flow:column nowrap; gap:10px; text-align:left; padding:30px; border:4px double #000;}
#wrap .swiper-wrapper .profile .container .photo_info .my_info p {}
#wrap .swiper-wrapper .profile .container .photo_info .my_info p:nth-child(1) span {margin-right:20px;}
#wrap .swiper-wrapper .profile .container .photo_info .my_info p span {font-size:1.125rem; font-weight:700;}
#wrap .swiper-wrapper .profile .container .my_container {
    display:flex; flex-flow:column nowrap; 
    width:1200px; height:100%;
    gap:50px;
}
#wrap .swiper-wrapper .profile .container .photo_info .my_info .name {margin-bottom:20px;}
#wrap .swiper-wrapper .profile .container .my_container h2 {/* 공통 모든 제목 */
    font-family: "Baloo Bhai 2", sans-serif; font-size:2.5rem; font-weight:700;
    margin-bottom:20px;
}
#wrap .swiper-wrapper .profile .container .my_container .my_career {
    display:flex; justify-content:space-between; border-bottom:1px solid #d9d9d9;
    padding-bottom:50px;
}
#wrap .swiper-wrapper .profile .container .my_container .my_career .list li {/* 공통 영역 */
    margin-bottom:20px;
}
#wrap .swiper-wrapper .profile .container .my_container .my_career .list li .date {
    margin-right:20px; width:80px;
    color:#949494;
}
#wrap .swiper-wrapper .profile .container .my_container .my_career .list li:last-of-type {margin-bottom:0;}
#wrap .swiper-wrapper .profile .container .my_container .my_career .education {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .education ul {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .education ul li {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .education ul li span {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .license {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .license ul {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .license ul li {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .license ul li span {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .experience {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .experience ul {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .experience ul li {}
#wrap .swiper-wrapper .profile .container .my_container .my_career .experience ul li span {}
#wrap .swiper-wrapper .profile .container .my_container .my_skill {}
#wrap .swiper-wrapper .profile .container .my_container .my_skill h2 {margin-bottom:20px;}
#wrap .swiper-wrapper .profile .container .my_container .my_skill h2 span {font-size:1rem; color:#949494; margin-left:30px;}
#wrap .swiper-wrapper .profile .container .my_container .my_skill > p {/* 후버시 나오는 설명 */
    display:block;
    opacity: 0;
    transform: translateX(-50px); background:#eee; padding:30px; margin-top:20px;
    transition: opacity 2s ease, transform 1s ease;
    display:flex; flex-flow:column nowrap; gap:10px;
    border-radius:30px;
}
#wrap .swiper-wrapper .profile .container .my_container .my_skill > p.active {/* js토글 */
    opacity: 1;
    transform: translateX(0);background:#eee; padding:30px; margin-top:20px;
    display:flex; flex-flow:column nowrap; gap:10px;
    border-radius:30px;
}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container {display:flex; gap:50px;}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill {}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill p {}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill p img {}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill p img:hover {transform:rotate(30deg)}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill .application {display:none;}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill .application > span {}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill .application .score_wrap {display:flex;}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill .application .score_wrap .score {}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill .application .score_wrap .score img {display:block;}
#wrap .swiper-wrapper .profile .container .my_container .my_skill .skill_container .skill > p {}
/* ----------------------------------------------------3행 프로젝트-웹 */
#wrap .swiper-wrapper .project_web {background:#000; display:flex; align-items:center;}
#wrap .swiper-wrapper .project_web .container {width:1620px; margin:0 auto;}
#wrap .swiper-wrapper .project_web .container #project_swiper {
    position:relative;
}
#wrap .swiper-wrapper .project_web .container #project_swiper * {color:#fff;}
#wrap .swiper-wrapper .project_web .container #project_swiper h2 {font-size:3.75rem; font-weight:600; margin-bottom:10px;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-button-prev {left:30px;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-button-prev::after {display:none;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-button-prev img {width:50px; }
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-button-next {right:30px;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-button-next img {width:50px;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-button-next::after {display:none;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-pagination {
    top:80px; width:calc(100% - 100px); left:50%; transform:translateX(-50%);
    height:5px;
    /* border-top:px solid #fff; */
    border-radius: 999px; /* 양쪽 둥글게 */
    overflow: hidden; /* fill이 넘치지 않게 */
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-pagination-progressbar-fill {
    background:#000;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper {}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide {}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap {
    display:flex; gap:50px; justify-content:center; align-items:center;
    margin:0 auto;
    background:#fff; height:700px; width:1620px; border-radius:50px;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content {
    background:#000; padding:50px; border-radius:50px; transition:all 0.5s;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content:hover {transform:scale(103%);}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content p {font-weight:700;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content p span {
    font-size:0.875rem;
    color:#aaa;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .project_name {
    font-size:1.875rem; font-weight:600; margin-bottom:50px;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .project_date {}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .project_program {margin:20px 0;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .project_responsive {margin-top:20px;}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .project_page {}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .page_btn_wrap {
    margin-top:20px; display:flex; flex-flow:column nowrap; gap:20px;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .page_btn_wrap a {
    width:max-content; padding:5px 20px; background:#fff; color:#000;
    border-radius:20px;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .left_content .page_btn_wrap a:hover {filter:brightness(70%);}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .right_content {
    width:900px; height:624px;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .right_content img {
    display:block; border-radius:20px; transition:all 1s;
    width:100%; height:100%;
}
#wrap .swiper-wrapper .project_web .container #project_swiper .swiper-wrapper .swiper-slide .web_wrap .right_content img:hover {
    transform:scale(105%);
}

/* ----------------------------------------------------4행 프로젝트- 디자인 */
#wrap .swiper-wrapper .project_design {}
#wrap .swiper-wrapper .project_design .container {
    width:1620px; margin:120px auto 0; height:700px; overflow:hidden;
}
#wrap .swiper-wrapper .project_design .container * img:hover {
    filter:brightness(80%);
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper {width:100%; height:100%;}
#wrap .swiper-wrapper .project_design .container #project_design_swiper h2 {font-size:3.75rem; font-weight:600; margin-bottom:30px;}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container {
    display:flex;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .swiper-slide-active {width:300px;}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left {margin-right:100px;}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_poster {width:1020px;}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_poster .swiper-wrapper {
    width:max-content;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_poster .swiper-wrapper .swiper-slide {
    width:300px;  height:300px;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_poster .swiper-wrapper .swiper-slide img {
    display:block; width:100%;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_long_banner {
    width:900px; margin-top:30px;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_long_banner .swiper-wrapper {
    /* display:flex; gap:30px; */
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_long_banner .swiper-wrapper .swiper-slide {
    width:400px; height:200px;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_left .design_long_banner .swiper-wrapper .swiper-slide img {
    display:block; width:100%;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_right {}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_right .swiper-wrapper {}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_right .swiper-wrapper .swiper-slide {
    width:500px; height:600px;
}
#wrap .swiper-wrapper .project_design .container #project_design_swiper .design_container .design_right .swiper-wrapper .swiper-slide img {
    width:100%; display:block;
}
/* ----------------------------------------------------5행 아웃트로 */
#wrap .swiper-wrapper .outtro {display:flex; align-items:center; background:#000; position:relative;}
#wrap .swiper-wrapper .outtro .container {
    width:1620px; margin:0 auto;
    display:flex; align-items:center; justify-content:center; gap:50px;
    
}
#wrap .swiper-wrapper .outtro .container .outtro_left {}
#wrap .swiper-wrapper .outtro .container .outtro_left img {display:block;}
#wrap .swiper-wrapper .outtro .container .outtro_right {display:flex; flex-flow:column nowrap; gap:20px;}
#wrap .swiper-wrapper .outtro .container .outtro_right p {color:#fff;}
#wrap .swiper-wrapper .outtro .container .connect {
    background:red; position:absolute;
    width:100%; bottom:0;
}
#wrap .swiper-wrapper .outtro .container .connect .connect_wrap {padding:30px; background:#fff; display:flex; flex-flow:column nowrap; gap:30px;}
#wrap .swiper-wrapper .outtro .container .connect .connect_wrap p {font-size:1.125rem;}
#wrap .swiper-wrapper .outtro .container .connect .connect_wrap p span {font-weight:700;}
.popup_bg {width:100vw; height:100vh; background:rgba(0,0,0,0.3); 
    position:fixed; top:0; left:0;
    z-index:800;
    display:none;
}
.popup_bg .popup {
    width:900px; margin:100px auto 0;
    height:80vh; overflow:auto;
}
.popup_bg .popup img {width:100%;}