.portfolio_slogan{position:absolute;max-width:1000px;width:100%;height:auto;overflow:hidden;left:50%;top:50%;transform:translate(-50%,-45%);z-index:1;opacity: 0; filter: blur(10px); transition: opacity 0.75s ease-in-out 0.55s, filter 0.75s ease-in-out 0.5s;}
.portfolio_slogan .mini_title{width:100%;height:auto;overflow:hidden;color:#fff;font-family:'NanumSquareNeo';color:#fff;font-size:11px;line-height:18px;letter-spacing:0.575em;font-weight:400;margin-bottom:55px;text-align:center}
.portfolio_slogan .titlebox{width:100%;height:auto;overflow:hidden;margin:0 auto;font-weight:800;font-size:48px;line-height:55px;text-align:center;color:#fff;margin-bottom:50px}
.portfolio_slogan .textbox{width:100%;height:auto;overflow:hidden;font-size:18px;line-height:1.6;text-align:center;color:#fff;font-weight:300}
.portfolio_slogan .textbox span{font-weight:800}

.portfolio_visual{position:relative;width:100%;height:525px;overflow:hidden;background-size:cover;font-family:'NanumSquareNeo';background-position: 50% 50%; background-repeat: no-repeat;}
.portfolio_visual.animate .portfolio_slogan{opacity: 1; filter: blur(0px);}
.portfolio_visual img{width:100%}
.portfolio_visual_bottom{position:relative;width:100%;height:auto;overflow:hidden;background:#000;font-family:'NanumSquareNeo'}
.portfolio_visual_bottom .in_box{max-width:1117px;width:100%;height:auto;margin:0 auto;color:#fff;display:flex;align-items:center;padding:29px 0}
.portfolio_visual_bottom .in_box .inbox_a{width:22.47%;height:auto;overflow:hidden;font-size:20px;line-height:46px;font-weight:300;text-align:center;border-right:1px solid #e42f58; opacity: 0; transition: opacity 0.75s ease 0.8s; letter-spacing: -0.075em;}
.portfolio_visual_bottom .in_box .inbox_a span{font-weight:900;}
.portfolio_visual_bottom .in_box .inbox_b{width:65.26%;height:auto;overflow:hidden;font-size:15px;line-height:23px;padding:0 40px; opacity: 0; transition: opacity 0.75s ease 0.8s;letter-spacing: -0.025em; font-weight: 500;}
.portfolio_visual_bottom .in_box .inbox_b span{display:inline-block;margin-right:3px;letter-spacing:-1px}
.portfolio_visual_bottom .in_box .inbox_c{width:12.27%;height:auto;}
.portfolio_visual_bottom .in_box .inbox_c .incircle{width:93px;height:93px;line-height:93px;background:#e42f58;border-radius:50%;text-align:center;cursor:pointer;transform: rotateX(90deg); opacity: 0; transition: opacity 0.75s ease-in-out 1s, transform 0.75s ease-in-out 1s, box-shadow 0.3s ease;}
.portfolio_visual_bottom.animate .in_box .inbox_a{opacity: 1;}
.portfolio_visual_bottom.animate .in_box .inbox_b{opacity: 1;}
.portfolio_visual_bottom.animate .in_box .inbox_c .incircle{transform: rotateX(0deg); opacity: 1;}

.portfolio_section01{position:relative;width:100%;height:auto;overflow:hidden;background:#fff;font-family:'NanumSquareNeo'}
.portfolio_section01 img {width:100%;}
.portfolio_section01 .in_box{max-width:100%;width:100%;height:auto;overflow:hidden;margin:0 auto;display:flex;}
.portfolio_section01 .in_box .inbox_a{width:calc(100% - 264px);height:auto;overflow:hidden;font-size:15px;line-height:24px;font-weight:600;text-align:left;color:#000;letter-spacing:-1px}
.portfolio_section01 .in_box .inbox_a .img{width:100%;height:auto;overflow:hidden}
.portfolio_section01 .in_box .inbox_a .img img{max-width:100%}
.portfolio_section01 .in_box .inbox_a span{font-weight:700}
.portfolio_section01 .in_box .inbox_b{width:264px;height:auto;overflow:hidden;font-size:15px;line-height:23px}
.portfolio_section01 .in_box .inbox_b span{display:inline-block;margin-right:3px;letter-spacing:-1px}
.portfolio_section01 .in_box .inbox_b img{max-width:100%}

.portfolio_section02{position:relative;width:100%;height:auto;overflow:hidden;background:#fff;font-family:'NanumSquareNeo';text-align:center}
.portfolio_section02 img{max-width:100%}
.portfolio_section02 .topbox{position:relative;max-width:1000px;width:100%;height:auto;overflow:hidden;margin:0 auto;padding:80px 10px;text-align:center}
.portfolio_section02 .topbox .textbox1{width:100%;height:auto;overflow:hidden;font-size:20px;line-height:25px;letter-spacing:-1px;color:#000;margin-bottom:30px}
.portfolio_section02 .topbox .textbox1 span{font-weight:800}
.portfolio_section02 .topbox .textbox2{width:100%;height:auto;overflow:hidden;font-size:15px;line-height:24px;color:#000;font-weight:600;margin-bottom:35px}
.portfolio_section02 .topbox .textbox3{max-width:230px;width:100%;height:auto;overflow:hidden;font-size:18px;line-height:23px;text-align:center;color:#fff;background:#000;border-radius:30px 0 0;padding:17px 0;cursor:pointer;margin:0 auto}

.portfolio_section03{position:relative;max-width:1920px;width:100%;height:860px;overflow:hidden;font-family:'NanumSquareNeo';margin:0 auto;background:url(/img/portfolio_01_img04.jpg) center no-repeat;background-size:cover}
.portfolio_section03 .inbox{position:absolute;max-width:1000px;width:100%;height:auto;overflow:hidden;left:50%;top:28%;transform:translate(-50%,-35%);z-index:1}
.portfolio_section03 .inbox .textbox1{font-size:20px;line-height:25px;letter-spacing:-1px;margin-bottom:30px;text-align:center;font-weight:800}
.portfolio_section03 .inbox .textbox2{font-size:15px;line-height:20px;text-align:center;font-weight:800}

.portfolio_section04{position:relative;max-width:1920px;width:100%;height:740px;overflow:hidden;padding:300px 10px 0;background:url(/img/portfolio_01_img05.jpg) center no-repeat;background-size:cover;margin:0 auto;font-family:'NanumSquareNeo'}
.portfolio_section04 .inbox{max-width:1264px;width:100%;height:auto;overflow:hidden;text-align:right;margin:0 auto}
.portfolio_section04 .inbox .textbox1{width:100%;height:auto;overflow:hidden;font-size:22px;line-height:31px;font-weight:700;letter-spacing:-1.5px;color:#fff;margin-bottom:30px;text-align:right}
.portfolio_section04 .inbox .textbox1 span{color:#e42f58}
.portfolio_section04 .inbox .textbox1 p{margin:0;padding:0;font-weight:700;font-size:20px}
.portfolio_section04 .inbox .textbox2{width:100%;height:auto;overflow:hidden;font-size:18px;line-height:29px;font-weight:300;color:#fff;margin-bottom:35px;text-align:right}
.portfolio_section04 .inbox .textbox2 span{font-weight:800}
.portfolio_section04 .in_btn{max-width:204px;width:100%;height:auto;overflow:hidden;font-size:16px;line-height:23px;text-align:center;color:#171717;float:right;background:#fff;border-radius:30px 0 0;padding:13px 0;cursor:pointer;font-weight:600}

.portfolio_section05{position:relative;max-width:1920px;width:100%;height:auto;overflow:hidden;margin:0 auto}
.portfolio_section05 img{max-width:100%}

.portfolio_section06{position:relative;max-width:1920px;width:100%;height:auto;overflow:hidden;margin:0 auto}
.portfolio_section06 img{max-width:100%}

.portfolio_section07{position:relative;max-width:1920px;width:100%;height:auto;overflow:hidden;margin:0 auto}
.portfolio_section07 img{max-width:100%}


/* 공통 스타일 */
.portfolio-section{font-family:'NanumSquareNeo'; user-select: none; -webkit-user-select: none;}
.portfolio-section .inner-box{max-width: 1264px; margin: 0 auto; width: 90%;}
.portfolio-section img:not(.brand-logo > img){max-width: 100%; width: 100%;object-fit: cover;}
.portfolio-section ul{list-style: none;}
.portfolio-section .section-heading{ text-align: center; }
.portfolio-section .portfolio-btn{width: 204px; height: 51px; font-weight: 500; font-size: 16px; text-align: center; line-height: 51px; border-top-left-radius: 31px; display: inline-block; letter-spacing: -0.075em; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; overflow: hidden;}
.portfolio-section .section-title{font-weight: 800; font-size: 20px; letter-spacing: -0.075em; margin: 0;} 
.portfolio-section .section-desc{font-weight: 500; font-size: 15px; padding: 32px 0 0; letter-spacing: -0.065em; margin: 0; line-height: 1.65;}


/* 브랜드 소개 */
.portfolio-brand{padding: 80px 0;}
.portfolio-brand .inner-box{display: flex; justify-content: space-between; align-items: center; }
.portfolio-brand .brand-info{opacity: 0; filter: blur(5px); clip-path: inset(0 100% 0 0); transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 1s; width: 100%;}
.portfolio-brand .brand-info .brand-logo{}
.portfolio-brand .brand-info .brand-desc{font-weight: 500; font-size: 15px; line-height: 1.65; letter-spacing: -0.075em; padding: 30px 0 0; margin: 0;}
.portfolio-brand .brand-colors{padding-left: 0; margin-bottom: 0; display: flex; opacity: 0; filter: blur(5px); clip-path: inset(0 0 0 100%); transition: all 1.25s cubic-bezier(0.77, 0, 0.175, 1) 1.25s;}
.portfolio-brand .brand-colors li{}
.portfolio-brand .brand-colors li .color-box{width: 132px; height: 132px;}
.portfolio-brand .brand-colors li .color-code{font-weight: 700; font-size: 15px; line-height: 1.65; letter-spacing: -0.075em; display: block; margin: 8px 0 0; text-transform: uppercase;}
.portfolio-brand.animate .brand-info{opacity: 1; filter: blur(0px); clip-path: inset(0 0 0 0);}
.portfolio-brand.animate .brand-colors{opacity: 1; filter: blur(0px); clip-path: inset(0 0 0 0);}


/* 반응형 홈페이지 */
.portfolio-homepage{padding: 80px 0 75px;}
.portfolio-homepage .section-heading{opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease 0.3s, transform 0.9s ease 0.3s;}
.portfolio-homepage.animate .section-heading{opacity: 1; transform: translateY(0px);}
.portfolio-homepage .section-heading .section-title{}
.portfolio-homepage .section-heading .section-desc{}
.portfolio-homepage .section-heading .portfolio-homepage-btn{background-color: #272422; color: #fff;margin: 36px 0 0;}


/* 검색광고 */
.portfolio-search{padding: 80px 0 0; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;}
.portfolio-search .inner-box{width: 95%;}
.portfolio-search .section-heading{padding: 0 0 70px; opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease 0.3s, transform 0.9s ease 0.3s;}
.portfolio-search .img-box img{opacity: 0; transition: opacity 0.9s ease 0.6s;}
.portfolio-search.animate .section-heading{opacity: 1; transform: translateY(0px);}
.portfolio-search.animate .img-box img{opacity: 1;}


/* 블로그 */
.portfolio-blog{display: flex; align-items: center; height: 860px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
.portfolio-blog .inner-box{display: flex; justify-content: flex-end;}
.portfolio-blog .text-box{text-align: right; opacity: 0; filter: blur(3px); transition: opacity 1s ease-in-out 0.25s, filter 1s ease-in-out 0.25s;}
.portfolio-blog.animate .text-box{opacity: 1; filter: blur(0px);}
.portfolio-blog .text-box .section-title{color: #fff;}
.portfolio-blog .text-box .section-title .show-mo{display: none;}
.portfolio-blog .text-box .section-desc{color: #fff;}
.portfolio-blog .portfolio-blog-btn{margin: 60px 0 0; background-color: #fff; color: #262626;} 



@media (min-width: 992px) {
    .portfolio-homepage .section-heading .portfolio-homepage-btn:hover{background-color: #fff; color: #272422;box-shadow: 0 6px 16px rgba(0, 0, 0, 0.23);}
    .portfolio-blog .text-box .portfolio-blog-btn:hover{background-color: #333; color: #fff;;box-shadow: 0 6px 16px rgba(255, 255, 255, 0.38);}
    .portfolio_visual_bottom .in_box .inbox_c .incircle:hover{box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);}
}


@media (max-width: 991px){  
    .portfolio_slogan .mini_title{margin-bottom: 39px; font-size: 9px;}
    .portfolio_slogan .titlebox{font-size:30px;line-height:35px;margin-bottom:33px} 
    .portfolio_slogan .textbox{font-size:15px;line-height:1.7;padding:0 15px}

    .portfolio_visual{height:450px;background-size:cover}    
    .portfolio_visual_bottom .in_box{flex-wrap:wrap;justify-content:center; padding: 24px 0 29px;} 
    .portfolio_visual_bottom .in_box .inbox_a{width:180px;border-right:0;border-bottom:1px solid #e42f58;font-size:17px} 
    .portfolio_visual_bottom .in_box .inbox_b{width:100%;height:auto;overflow:hidden;font-size:13px;line-height:23px;padding:15px 40px 0;text-align:center} 
    .portfolio_visual_bottom .in_box .inbox_c{width:100%;height:auto;overflow:hidden;padding-top:20px} 
    .portfolio_visual_bottom .in_box .inbox_c .incircle{margin:0 auto}

    .portfolio_section01 .in_box{flex-direction:column;align-items:center;} 
    .portfolio_section01 .in_box .inbox_a{width:100%;margin-bottom:20px;padding:0 10px} 
    .portfolio_section01 .in_box .inbox_a .img{text-align:center} 
    .portfolio_section01 .in_box .inbox_a br:nth-child(4){display:none} 
    .portfolio_section01 .in_box .inbox_b{text-align:center}

    .portfolio_section02 .topbox{padding:60px 10px} 
    .portfolio_section02 .topbox .textbox1{font-size:17px;line-height:23px;letter-spacing:-1.5px;margin-bottom:10px} 
    .portfolio_section02 .topbox .textbox2{font-size:13px;line-height:18px;margin-bottom:20px} 
    .portfolio_section02 .topbox .textbox3{font-size:13px;line-height:18px;border-radius:30px 0 0;padding:15px 0}

    .portfolio_section03{height:430px} 
    .portfolio_section03 .inbox{position:absolute;max-width:1000px;width:100%;height:auto;overflow:hidden;left:50%;top:28%;transform:translate(-50%,-35%);z-index:1;padding:0 10px} 
    .portfolio_section03 .inbox .textbox1{float:none;width:100%;font-size:18px;line-height:23px;margin-bottom:10px} 
    .portfolio_section03 .inbox .textbox2{float:none;width:100%;font-size:15px;line-height:20px;letter-spacing:-.5px} 
    .portfolio_section03 .inbox .textbox2 br{display:none}

    .portfolio_section04{height:370px;padding:145px 10px 0} 
    .portfolio_section04 .inbox .textbox1{float:none;width:100%;font-size:17px;line-height:23px;margin-bottom:10px} 
    .portfolio_section04 .inbox .textbox1 p{font-size:15px} 
    .portfolio_section04 .inbox .textbox2{float:none;width:100%;font-size:14px;line-height:20px;margin-bottom:15px;letter-spacing:-.5px} 
    .portfolio_section04 .inbox .textbox2 br:nth-child(3){display:none} 
    .portfolio_section04 .inbox .in_btn{max-width:180px;font-size:14px;line-height:18px;border-radius:25px 0 0;padding:10px 0}

    .portfolio_section01 img {width:100%;}


    /* 공통 스타일 */
    .portfolio-section .portfolio-btn{width: 180px; height: 44px; font-size: 13.5px; line-height: 44px; border-top-left-radius: 28px; }
    .portfolio-section .section-title{font-size: 18px;} 
    .portfolio-section .section-desc{font-size: 13px; padding: 23px 0 0; line-height: 1.7;}


    /* 브랜드 소개 */
    .portfolio-brand{padding: 55px 0 50px;}
    .portfolio-brand .inner-box{flex-direction: column; row-gap: 27px;}
    .portfolio-brand .brand-info{opacity: 0; filter: blur(0px); clip-path: inset(0 0 0 0); transition: opacity 1s 0.35s;}
    .portfolio-brand .brand-info .brand-logo{display: flex; justify-content: center;}
    .portfolio-brand .brand-info .brand-logo img{transform: scale(0.8); transform-origin: top center;}
    .portfolio-brand .brand-info .brand-desc{text-align: center; font-size: 13px; line-height: 1.7; padding: 24px 0 0;}
    .portfolio-brand .brand-colors{opacity: 0; filter: blur(0px); clip-path: inset(0 0 0 0); transition: opacity 1s 0.35s;}
    .portfolio-brand .brand-colors li{}
    .portfolio-brand .brand-colors li .color-box{width: 100px; height: 100px;}
    .portfolio-brand .brand-colors li .color-code{font-size: 12.5px; margin: 4px 0 0; text-align: center;}
    .portfolio-brand.animate .brand-info{opacity: 1; }
    .portfolio-brand.animate .brand-colors{opacity: 1;}


    /* 반응형 홈페이지 */
    .portfolio-homepage{padding: 62px 0 57px;}   
    .portfolio-homepage .section-heading .section-desc{text-wrap: balance;}
    .portfolio-homepage .section-heading .section-desc br{display: none;} 
    .portfolio-homepage .section-heading .portfolio-homepage-btn{margin: 27px 0 0;}


    /* 검색광고 */
    .portfolio-search{padding: 55px 0 0; background-position: 35% 50%;}
    .portfolio-search .inner-box{}
    .portfolio-search .section-heading{padding: 0 0 45px;}
    .portfolio-search .section-heading .section-desc{padding-left: 5%; padding-right: 5%;}


    /* 블로그 */
    .portfolio-blog{height: 650px;  }
    .portfolio-blog .inner-box{}
    .portfolio-blog .text-box{}   
    .portfolio-blog .text-box .section-title{line-height: 1.4;}
    .portfolio-blog .text-box .section-title .show-mo{display: block;}
    .portfolio-blog .portfolio-blog-btn{margin: 50px 0 0; } 

}

@media (max-width: 700px){
    .portfolio_slogan .textbox br:nth-child(4){display:none}
    .portfolio-blog{background-position: 60% 50%;}
}

@media (max-width: 450px){
    .portfolio_visual{height: 425px;}
    .portfolio_slogan .mini_title{font-size: 7px; margin-bottom: 37px;}
    .portfolio_slogan .titlebox{} 
    .portfolio_slogan .textbox{font-size: 13px; line-height: 1.6; text-wrap: balance; padding: 0; width: 84%; margin: 0 auto;}
    .portfolio_slogan .textbox br{display: none;}
    .portfolio_visual_bottom .in_box .inbox_a{line-height: 40px;}
    .portfolio_visual_bottom .in_box .inbox_b{font-size: 11.5px; padding: 15px 0 0; width: 80%; margin: 0 auto; text-wrap: balance; line-height: 18px;}
    .portfolio_visual_bottom .in_box .inbox_b br{display: none;}
    .portfolio_visual_bottom .in_box .inbox_c .incircle{width: 80px; height: 80px; line-height: 80px; font-size: 13px;}


    /* 공통 스타일 */
    .portfolio-section .portfolio-btn{width: 160px; height: 40px; font-size: 12.5px; line-height: 40px; border-top-left-radius:26px;}
    .portfolio-section .section-title{font-size: 16px;} 
    .portfolio-section .section-desc{font-size: 12px; padding: 20px 0 0;}


     /* 브랜드 소개 */
    .portfolio-brand{padding: 40px 0 35px;}
    .portfolio-brand .inner-box{row-gap: 25px; width: 70%;}
    .portfolio-brand .brand-info{}
    .portfolio-brand .brand-info .brand-logo{}
    .portfolio-brand .brand-info .brand-logo img{transform: scale(0.55);}
    .portfolio-brand .brand-info .brand-desc{text-wrap:balance; font-size: 12px; padding: 10px 0 0; line-height: 1.75;}
    .portfolio-brand .brand-info .brand-desc br{display: none;}
    .portfolio-brand .brand-colors{}
    .portfolio-brand .brand-colors li{}
    .portfolio-brand .brand-colors li .color-box{width: 72px; height: 72px;}
    .portfolio-brand .brand-colors li .color-code{font-size: 10px; margin: 2px 0 0;}


    /* 반응형 홈페이지 */
    .portfolio-homepage{padding: 47px 0 42px;}   
    .portfolio-homepage .inner-box{width: 80%;}
    .portfolio-homepage .section-heading .section-desc{line-height: 1.75;}  
    .portfolio-homepage .section-heading .portfolio-homepage-btn{margin: 27px 0 0;}


    /* 검색광고 */
    .portfolio-search{padding: 40px 0 0; background-position: 25% 50%;}
    .portfolio-search .inner-box{}
    .portfolio-search .section-heading{padding: 0 0 30px;}
    .portfolio-search .section-heading .section-desc{text-wrap: balance; line-height: 1.75; padding-left: 10%; padding-right: 10%;}
    .portfolio-search .section-heading .section-desc br{display: none;}


    /* 블로그 */
    .portfolio-blog{height: 400px; background-position: 45% 50%;}
    .portfolio-blog .inner-box{}
    .portfolio-blog .text-box{}   
    .portfolio-blog .text-box .section-title,
    .portfolio-blog .text-box .section-desc{text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.55);}
    .portfolio-blog .portfolio-blog-btn{margin: 32px 0 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); width: 144px; font-size: 12px; height: 38px; line-height: 38px;} 

}