body *{transition: all 0.5s; line-height: 1.5;font-family: 'Pretendard';}
header{
    width: 100%; height: 40px; position: fixed; left: 0; top: 0; z-index: 10;
    background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.03);
    
}
header .menu{display: none}
header nav{
    display: flex; align-items: center;
    justify-content: center; margin: 0 auto;
    max-width: 1400px; min-width: 300px; /* ------ */
}
header nav>a{
    display: block; text-align: center;
    text-transform:uppercase; font-size: 0.875rem; font-weight: 600;
    width: 100%; position: relative; padding: 10px 0;
}
header nav>a:hover{color: #00D6FF;}
header nav>a::after{
    content: ""; position: absolute; left: 50%; bottom: 1px;
    width: 0%; height: 1px; background-color: #00D6FF;
    transition: width 0.5s; z-index: 11;
}
header nav>a::before{
    content: ""; position: absolute; right: 50%; bottom: 1px;
    width: 0%; height: 1px; background-color: #00D6FF;
    transition: width 0.5s; z-index: 11;
}
header nav>a:hover::after{width: 50%;}
header nav>a:hover::before{width: 50%;}
/* ================== */
#wrap{height: 100vh;}
/* ==================  intro : s */ 
#wrap .intro{width: 100%;height: 100%;}
#wrap .intro .container{
    max-width: 1400px; min-width: 300px; /* ------ */
    height: 100%;
    display: flex; align-items: center;
    margin: 0 auto; align-content: center;
}
#wrap .intro .container .video{
    max-width: 650px; min-width: 300px;
    margin-right: 30px;
}
#wrap .intro .container .video>video{width: 100%;}
#wrap .intro .container .title{}
#wrap .intro .container .title h1{
font-family: "Bebas Neue"; font-size: 12rem;
margin-right: 30px;
}
#wrap .intro .container .title h1>em{
font-family: "Bebas Neue"; font-size: 12rem; color: #00D6FF;
}
#wrap .intro .container .title .text{transform: scale(1.3) translateX(12%);}
#wrap .intro .container .title .text p{
    text-transform:uppercase;
}
#wrap .intro .container .title .text p:nth-child(2){
    font-size: 1.25rem; margin-top: 10px;
}
#wrap .intro .container .title .text p>em{font-weight: 600;}
/* ==================  intro : e */ 
/* ==================  profile : s */ 
#wrap .profile{background-color: #F8F8F8; width: 100%;}
#wrap .profile .profile_title{
    color: #00D6FF; font-size: 1.125rem;font-weight: 600;
    text-transform:capitalize;
}
#wrap .profile .profile_title>samp{color: #000; font-size: 1.125rem;}
#wrap .profile .container{
    max-width: 1400px; min-width: 300px; /* ------ */
    height: 100%; margin: 0 auto; display: flex;
    align-content: center; align-items: center;
    padding: 0 50px;
}
#wrap .profile .container .profile_left{width: 50%;}
#wrap .profile .container .profile_left h2{font-size: 1.875rem; margin-bottom: 50px;}
#wrap .profile .container .profile_left h2>em{font-weight: 600;}
#wrap .profile .container .profile_left h2>em:last-child{color: #00D6FF;}
#wrap .profile .container .profile_left .info{margin-bottom: 30px;}
#wrap .profile .container .profile_left .info>li>ul{display: flex;margin-top: 15px;}
#wrap .profile .container .profile_left .info>li>ul>li{margin-right: 20px;}
#wrap .profile .container .profile_left .info>li>ul>li:last-child{margin-right: 0px;}
#wrap .profile .container .profile_left .mbti{display: flex;}
#wrap .profile .container .profile_left .mbti>p{font-weight: 500; margin-right: 20px;}
#wrap .profile .container .profile_left .mbti .mbti_text{margin-bottom: 50px;}
#wrap .profile .container .profile_left .mbti .mbti_text>p{margin-bottom: 10px;}
#wrap .profile .container .profile_left .mbti .mbti_text>p:last-child{margin-bottom: 0px;}
#wrap .profile .container .profile_left .license{display: flex;}
#wrap .profile .container .profile_left .license>li>ul{margin-left: 20px;}
#wrap .profile .container .profile_left .license>li>ul>li{}
#wrap .profile .container .profile_left .license>li>ul>li>span{margin-right: 10px; font-size: 0.875rem;}
#wrap .profile .container .profile_left .license>li>ul>li:last-child{}
#wrap .profile .container .profile_right{width: 50%;}
#wrap .profile .container .profile_right .career{margin-bottom: 30px;}
#wrap .profile .container .profile_right .career>li{margin-bottom: 10px;}
#wrap .profile .container .profile_right .career>li:last-child{margin-bottom: 0px;}
#wrap .profile .container .profile_right .career>li>samp{}
#wrap .profile .container .profile_right .career>li>em{}
#wrap .profile .container .profile_right .skills{}
#wrap .profile .container .profile_right .skills .skills_box{
    display: flex; margin-top: 30px;
}
#wrap .profile .container .profile_right .skills .skills_box>span{
    display: block; width: 60px; height: 60px; margin-right: 15px;
}
#wrap .profile .container .profile_right .skills .skills_box>span:nth-child(1){background: url(../images/icon/ps.png) center/cover;}
#wrap .profile .container .profile_right .skills .skills_box>span:nth-child(2){background: url(../images/icon/ai.png) center/cover;}
#wrap .profile .container .profile_right .skills .skills_box>span:nth-child(3){background: url(../images/icon/fi.png) center/cover;}
#wrap .profile .container .profile_right .skills .skills_box>span:nth-child(4){background: url(../images/icon/html.png) center/cover;}
#wrap .profile .container .profile_right .skills .skills_box>span:nth-child(5){background: url(../images/icon/css.png) center/cover;}
#wrap .profile .container .profile_right .skills .skills_box>span:nth-child(6){background: url(../images/icon/js.png) center/cover;}
#wrap .profile .container .profile_right .skills .skills_box>span:nth-child(7){background: url(../images/icon/git.png) center/cover;}
#wrap .profile .container .profile_right .skills .skills_box>span:last-child{margin-right: 0px;}
/* ==================  profile : e */ 
/* ==================  responsive_project : s */ 
#wrap .responsive_project{width: 100%; }
.responsive_project .swiper-slide .container{
    display: flex; height: 100vh;
    justify-content: space-between;
}
.responsive_project .swiper-slide .container .responsive_project_text{
    width: 37.5%; padding: 100px;
}
.responsive_project .swiper-slide .container .responsive_project_text h2{
    font-size: 1.563rem; font-weight: 600; color: #00D6FF; margin-bottom: 200px; text-transform: uppercase;
}
.responsive_project .swiper-slide .container .responsive_project_text .textbox {background-color: #fff;}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .rp_text{margin-bottom: 40px;}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .rp_text li{}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .rp_text li:first-child{
    font-size: 1.375rem; font-weight: 600; margin-bottom: 10px;
}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .text_details{margin-bottom: 100px;}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .text_details li{margin-bottom: 10px;}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .text_details li>span{margin-left: 10px;}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .text_details li:last-child{margin-bottom: 0px;}
.responsive_project .swiper-slide .container .responsive_project_text .textbox .btn_box{
    width: 100%; display: flex; 
}
.responsive_project .swiper-slide .container .responsive_project_text .btn_box>a{
    display: block; padding: 10px 0; background-color: #00D6FF; color: #fff; border-radius: 10px;
    width: 100%; text-align: center; margin-right: 10px; font-weight: 600; border: 1px solid #00D6FF;
}
.responsive_project .swiper-slide .container .responsive_project_text .btn_box>a:hover{
    background-color: #fff; color: #00D6FF; border: 1px solid #00D6FF;
}
.responsive_project .swiper-slide .container .responsive_project_text .btn_box>a:nth-child(3){
    background-color: #F8F8F8; color: #888; border: 1px solid #F8F8F8;
}
.responsive_project .swiper-slide .container .responsive_project_text .btn_box>a:last-child{
    margin-right: 0px; background-color: #F8F8F8; color: #888; border: 1px solid #F8F8F8;
}
.responsive_project .swiper-slide .container .responsive_project_text .btn_box>a:last-child:hover,
.responsive_project .swiper-slide .container .responsive_project_text .btn_box>a:nth-child(3):hover
{
    background-color: #888; color: #fff; border: 1px solid #888;
}
.responsive_project .swiper-slide .container .responsive_project_img{width: 62.5%;}
.responsive_project .swiper-slide .container .responsive_project_img p{width: 100%; height: 100%;}
.responsive_project .marshall .container .responsive_project_img p{background: url(../images/marshall.jpg) center/cover;}
.responsive_project .hera .container .responsive_project_img p{background: url(../images/hera.jpg) center/cover;}
.responsive_project .whitegown .container .responsive_project_img p{background: url(../images/whitegown.jpg) center/cover;}
.responsive_project .landing_page .container .responsive_project_img p{background: url(../images/landing_page.jpg) center/cover;}
/* ==================  responsive_project : e */ 
/* ==================  Product_LandingPage : s */ 
.product_landingPage{width: 100%;}
.product_landingPage .container{
    display: flex; flex-flow: column nowrap;
    justify-content: center; align-content: center;
    max-width: 1400px; min-width: 320px; height: 100%; padding:80px;
    margin: 0 auto;
    
}
.product_landingPage .container h2{
    font-size: 1.563rem; font-weight: 600; color: #00D6FF; margin-bottom: 50px; text-align: center;text-transform: uppercase;
}
.product_landingPage .container .swiper_box{width: 100%;}
.product_landingPage .container .swiper_box .swiper .swiper-wrapper{transition-timing-function: linear;}
.product_landingPage .container .swiper_box .swiper .swiper-slide img{ transform: scale(1)}
.product_landingPage .container .swiper_box .swiper .swiper-slide{
    cursor: pointer;/* 마우스 올리면 손가락아이콘이 나온다 */
    transition: transform 0.3s; overflow: hidden;
}
.product_landingPage .container .swiper_box .swiper .swiper-slide:hover img{transform: scale(1.009)}
.product_landingPage .container .swiper_box #top_swiper{margin-bottom: 20px;}
.product_landingPage .container .swiper_box #top_swiper .swiper-slide{ height: 500px;}
.product_landingPage .container .swiper_box #top_swiper .swiper-slide img{width: 100%;}
.product_landingPage .container .swiper_box #bottom_swiper{}
.product_landingPage .container .swiper_box #bottom_swiper .swiper-slide{width: 100%; height: 130px;}
.product_landingPage .container .swiper_box #bottom_swiper .swiper-slide img{width: 100%;}
/* ==================  Product_LandingPage : e */ 
/* ==================  contact : s */ 
.contact{background-color: #F8F8F8;}
.contact .container{
    max-width: 1400px; margin: 320px; margin: 0 auto;
    text-align: center; display: flex; flex-flow: column nowrap;
    justify-content: center; align-items: center; height: 100%;
}

.contact .container .box span:nth-child(1){margin-right: 22px;}
.contact .container h2{
    font-family: "Bebas Neue"; font-size: 12rem; margin-bottom: 50px;
}
.contact .container h2>em{
    font-family: "Bebas Neue"; color: #00D6FF;
}
.contact .container>p{
    font-size: 1.3rem; margin-bottom: 100px; line-height: 1.8;
}
.contact .container .contact_means{}
.contact .container .contact_means>p{
    font-size: 0.825rem;
}
.contact .container .contact_means>p:last-child{width: 150px; margin-top: 10px;}
.contact .container .contact_means>p:last-child img{width: 100%;}
/* ==================  contact : e */ 



/* ==================  디자인 프로젝트 실행 팝업(상세) */ 
.popup_bg {
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%; height: 100vh;
    top: 0; left: 0;
    position:fixed; z-index: 90;
    display: none;
}
.popup_bg .popup{
    max-width: 750px; min-width: 320px; height: 80vh; 
    overflow:auto; margin: 0 auto; 
    position: absolute; left: 50%; top: 100px;
    transform: translateX(-50%);
}
.popup_bg .popup img{width: 100%;}
/* ==================  디자인 프로젝트 실행 팝업(배너) */ 
.popup_bg_b {
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%; height: 100vh;
    top: 0; left: 0;
    position:fixed; z-index: 90;
    display: none;
}
.popup_bg_b .popup{
    max-width: 800px; min-width: 320px;  
    overflow:auto; margin: 0 auto; 
    position: absolute; left:50%; top:50%;
    transform: translate(-50%,-50%);
}
.popup_bg_b .popup img{width: 100%;}