@charset "utf-8";
/* ===================================
    common
====================================== */
.scrollLock{position:fixed;width:100%;height:100%;min-height:100%;overflow:hidden !important;}
.scrollLock *{touch-action:none;}
.sub .txtBorder{color: transparent;-webkit-text-stroke: 2px #fff;text-stroke: 2px #fff;}
.sub .counterNumber{counter-reset:number 0;} 
.sub .counterNumber .num-count:before{counter-increment:number 1;content:counter(number,decimal)}

.flowTxt{white-space:nowrap;overflow:hidden;}
.flowTxt p{animation:flowTxt 80s linear infinite;}
.flowTxt.reverse p{animation-direction:reverse;}
@keyframes flowTxt {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-100%, 0);}
}


/* commonSection */
.commonSection{gap:0;}
.commonSection .container{width:90%;}
.commonSection .box{position:relative;}
.commonSection .box .imgBg{border:1px solid #e8e1d1;background-repeat:no-repeat;background-position:center center;background-size:cover;position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;}
.commonSection .box-portfolio .imgBg{background-image:url(/images/common/common_box01.jpg)}
.commonSection .box-weDo .imgBg{background-image:url(/images/common/common_box02.jpg)}
.commonSection .box-ourStory .imgBg{background-image:url(/images/common/common_box03.jpg)}
.commonSection .box-weDo.text-right .imgBg{transform:scaleX(-1);}
.commonSection .box .morebtn{border:1px solid var(--pointcolor);border-radius:1.6875rem;padding:0.3em 2.5em;color:var(--pointcolor);}
.commonSection .box .morebtn:hover{background:var(--pointcolor);color:var(--pointcolor2);transition:all 0.1s ease-in-out;}
@media(max-width:500px){
    .commonSection .font-70{font-size:8.8vw;}
    .commonSection p{font-size:3vw;}
    .commonSection .box:not(.txt-right){text-align:right;}
    .commonSection .box:nth-child(2) .imgBg{transform:scaleX(-1);}
}
/* ===================================
    subtop
====================================== */
.subTop {z-index: 2;}
.subTop .subTopImg {position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;}

/* ourStory */
[pageName="ourStory"] .subTopImg{background:url(/images/subTop/ourStory.jpg)no-repeat right bottom /cover, var(--pointcolor);}
[pageName="ourStory"] .subTopCont{display:flex;align-items:center;flex-direction:column;justify-content:space-between;height:calc(100vh - 60px);padding-top:4rem}
[pageName="ourStory"] .subTopCont .flowTxt.txtBorder{color: transparent;-webkit-text-stroke: 2px rgba(255,255,255,0.3);text-stroke: 2px rgba(255,255,255,0.3);}
@media(max-width:1440px){
    [pageName="ourStory"] .subTopCont .img img{max-height:30rem;}
    [pageName="ourStory"] .subTopCont .txtwrap .font-40{font-size:1.875rem;}
}
@media(max-width:1240px){
    [pageName="ourStory"] .subTopImg{background:url(/images/subTop/ourStory.jpg)no-repeat right bottom /cover, var(--pointcolor);background-size:150% auto;}
}
@media(max-width:768px){
    [pageName="ourStory"] .subTopCont{justify-content:center;}
    [pageName="ourStory"] .subTopCont .container{margin:0 auto;}
}

/* recruit */
[pageName="recruit"] .subTopImg{background:url(/images/subTop/recruit.png)no-repeat center center /cover;}
[pageName="recruit"] .subTopCont{position:relative;display:block;aspect-ratio:1920 / 1300;padding-top:4rem}
[pageName="recruit"] .subTopCont .container{position:absolute;top:8vw;left:50%;transform:translateX(-50%);width:90%;}
@media(max-width:768px){
    [pageName="recruit"] .subTopImg{background-image:url(/images/subTop/recruit_m.jpg);}
    [pageName="recruit"] .subTopCont{aspect-ratio:50 / 93;}
    [pageName="recruit"] .subTopCont .container{top:28vw;}
}
@media(max-width:500px){
    [pageName="recruit"] .subTopCont{aspect-ratio:50 / 113;}
    [pageName="recruit"] .subTopCont .container> .flexList{--y-gap:0;}
}

/* weDo */
[pageName="weDo"] .subTop:after{content:'WE DO';display:block;position:absolute;bottom:1rem;left:1rem;margin:auto;color:#232323;opacity:0.05;line-height:1;font-size:11.25rem;font-weight:700;font-family:var(--pointfont);}
[pageName="weDo"] .subTop .subTopCont{display:block;letter-spacing:-0.1em;}
[pageName="weDo"] .subTop .subTopCont .container{width:90%;margin-right:auto;margin-left:auto;}
[pageName="weDo"] .subTop .subTopCont .flexList{margin-right:auto;margin-left:auto;}
[pageName="weDo"] .subTop .subTopCont h2{position:relative;display:inline-block;}
[pageName="weDo"] .subTop .subTopCont h2:before,
[pageName="weDo"] .subTop .subTopCont h2:after{content:'';width:100%;height:1px;background:var(--pointcolor);position:absolute;top:50%;margin:auto;}
[pageName="weDo"] .subTop .subTopCont h2:before{left:-1em;transform:translateX(-100%);}
[pageName="weDo"] .subTop .subTopCont h2:after{right:-1em;transform:translateX(100%);}
@media(min-width:1441px){
    [pageName="weDo"] .subTop .subTopCont .flexList{max-width:1380px;}
}
@media(max-width:1440px){
    [pageName="weDo"] .subTop .subTopCont > .flexList{width:90%;}
}
@media(max-width:1240px){
    [pageName="weDo"] .subTop .subTopCont h2:before{display:none;}
    [pageName="weDo"] .subTop .subTopCont h2:after{top:75%;width:150%;}
}
@media(max-width:768px){
    [pageName="weDo"] .subTop .subTopCont .font-55{font-size:4.4vw;}
    [pageName="weDo"] .subTop .subTopCont .font-70{font-size:5.6vw;}
    [pageName="weDo"] .subTop:after{position:relative;font-size:14.3vw;}
    [pageName="weDo"] .subTop .subTopCont > .flexList .box:nth-child(1){width:80%;}
}
@media(max-width:500px){
    [pageName="weDo"] .subTop .subTopCont .font-55{font-size:6vw;}
    [pageName="weDo"] .subTop .subTopCont .font-70{font-size:8vw;}
}

/* portfolio */
[pageName="portfolio"] .subTopImg{background:url(/images/subTop/portfolio.jpg)no-repeat center center /cover;}
[pageName="portfolio"] .subTopCont{height:calc(100vh - 60px);}


/* ===================================
    ourStory
====================================== */
[pageName="ourStory"] .sec01 .wrap+.wrap{margin-top:4.75rem;}
[pageName="ourStory"] .sec01 .wrap h6{position:relative;}
[pageName="ourStory"] .sec01 .wrap h6:after{position:absolute;top:0;margin:auto;font-family:var(--pointfont2);font-weight:700;font-size:16.875rem;color:#232323;opacity:0.13;line-height:1;}
[pageName="ourStory"] .sec01 .txt-img h6:after{content:'“';left:0;transform:translate(-60%, -15%);}
[pageName="ourStory"] .sec01 .txt-img .img img{transform:translateX(30%);}
[pageName="ourStory"] .sec01 .img-txt h6:after{content:'”';right:0;transform:translate(60%, -15%);}
[pageName="ourStory"] .sec01 .img-txt .img img{transform:translateX(-30%);}
@media(max-width:1440px){
    [pageName="ourStory"] .sec01{overflow:hidden;}
    [pageName="ourStory"] .sec01 .wrap{max-width:1200px;width:80%;margin-right:auto;margin-left:auto;}
}
@media(max-width:1440px) and (min-width:768px){
    [pageName="ourStory"] .sec01 .txt-img .img img{transform:translateX(10%);}
    [pageName="ourStory"] .sec01 .img-txt .img img{transform:translateX(-10%);}
}
@media(max-width:768px){
    [pageName="ourStory"] .sec01 .wrap+.wrap{margin-top:15rem;}
    [pageName="ourStory"] .sec01 .img-txt .img{order:1;}
}

[pageName="ourStory"] .sec02{background:url(/images/sub/ourStory/bg.jpg)no-repeat center center /cover;aspect-ratio:160 / 81;letter-spacing:-0.2rem;}
[pageName="ourStory"] .sec02 .container{height:100%;}
[pageName="ourStory"] .sec02 .cont_box .point-color2{border:.1875rem solid #fff;padding:0.8rem 1rem 0;}
@media(max-width:768px){
    [pageName="ourStory"] .sec02{background-image:url(/images/sub/ourStory/bg_m.jpg);aspect-ratio:750 / 1573;}
    [pageName="ourStory"] .sec02 .cont_box span{display:block;}
    [pageName="ourStory"] .sec02 .cont_box span:nth-child(1){text-align:left;}
    [pageName="ourStory"] .sec02 .cont_box span:nth-child(3){text-align:right;}
}
@media(max-width:500px){
    [pageName="ourStory"] .sec02 .cont_box{font-size:10vw;}
}



/* ===================================
    recruit
====================================== */
[pageName="recruit"] .sec01 ul.checkWrap li{background:var(--pointcolor);border-radius:1.25rem;display:flex;padding:0.5em 1em;}
[pageName="recruit"] .sec01 ul.checkWrap li:before{content:'';display:block;width:3rem;height:2.375rem;background:url(/images/sub/recruit/icon02.png)no-repeat center center /cover;flex-shrink:0;margin-right:.625rem;}
[pageName="recruit"] .sec01 ul.checkWrap li+li{margin-top:0.5em;}
[pageName="recruit"] .sec01 .expertList .box{border-radius:1.25rem;margin-top:12rem;padding:0 1.25rem 3.125rem;}
[pageName="recruit"] .sec01 .expertList .box h2{letter-spacing:-0.2rem;}
[pageName="recruit"] .sec01 .expertList .box .img{margin-top:-8.9375rem;}
[pageName="recruit"] .sec01 .expertList .box .img img{height:17.875rem;}



[pageName="recruit"] .sec01 .icon.arr img{height:5.8125rem;}

[pageName="recruit"] .sec01 .resumeWrap .tabWrap{max-width:890px;}
[pageName="recruit"] .sec01 .resumeWrap .tabWrap .tab{width:100%;max-width:8em;}
[pageName="recruit"] .sec01 .resumeWrap .tabWrap input[type="radio"]{display:none;}
[pageName="recruit"] .sec01 .resumeWrap .tabWrap label{display:block;width:100%;border-radius:1.875rem;padding:0.5em 0.2em;border:2px solid #000;cursor:pointer;}
[pageName="recruit"] .sec01 .resumeWrap .tabWrap label:hover,
[pageName="recruit"] .sec01 .resumeWrap .tabWrap input[type="radio"]:checked+label{border-color:var(--pointcolor);color:var(--pointcolor);font-weight:700;background:var(--pointcolor2);transition:all 0.1s ease-in-out;}
[pageName="recruit"] .sec01 .resumeWrap .uploadWrap #file{display:none;}
[pageName="recruit"] .sec01 .resumeWrap .uploadWrap input[type="text"]{width:24em;font-family:var(--mainfont);font-size:1rem;border:1px solid #ddd;padding:0.5em 1em;}
[pageName="recruit"] .sec01 .resumeWrap .uploadWrap input[type="text"]::placeholder{color:#ddd;}
[pageName="recruit"] .sec01 .resumeWrap label[for="file"]{border:1px solid var(--pointcolor);cursor:pointer;}
[pageName="recruit"] .sec01 .resumeWrap label[for="file"]:hover{color:#fff !important;background:var(--pointcolor);transition:all 0.1s ease-in-out;}
[pageName="recruit"] .sec01 .resumeWrap .uploadWrap .txt01 span{color:#ff134e;}
[pageName="recruit"] .sec01 .resumeWrap .uploadWrap .txt02{color:#b4b4b4;}

[pageName="recruit"] .sec01 .addBtn{width:80%;max-width:560px;border-radius:2.25rem;padding:0.6em 0.5em;}
[pageName="recruit"] .sec01 .addBtn .cir{width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;}
[pageName="recruit"] .sec01 .addBtn .cir span{padding-bottom:0.1em;}




[pageName="recruit"] .sec03{background:#1e1e1e;}
@media(min-width:769px){
    [pageName="recruit"] .sec01{padding-top:0;}
}
@media(max-width:768px){
    [pageName="recruit"] .sec01 ul.checkWrap li{display:block;text-align:center;}
    [pageName="recruit"] .sec01 ul.checkWrap li:before{margin:0 auto 5px;}
}
@media(max-width:500px){
    [pageName="recruit"] .sec01 .resumeWrap .uploadWrap input[type="text"]{width:100%;font-size:1.25rem;}
    [pageName="recruit"] .sec01 .resumeWrap label[for="file"]{width:30%;margin-top:0.5rem;display:inline-block;font-size: 1.25rem;}
}

/* ===================================
    weDo
====================================== */
[pageName="weDo"] .sec01 .titwrap:before{content:'';display:block;width:1px;height:3rem;border-right:1px solid var(--pointcolor3);margin-right:auto;margin-left:auto;}
[pageName="weDo"] .sec01 .cont_box .flexList{--x-gap:5.625rem;}
[pageName="weDo"] .sec01 .cont_box .flexList .cir img{height:26.4375rem;}
[pageName="weDo"] .sec01 .cont_box .cont{border-radius:1.875rem;}
[pageName="weDo"] .sec01 .cont_box .line{width:100%;height:2px;background:linear-gradient(to right, transparent 10%, #8d8d8d 30%, #8d8d8d 70%, transparent 90%);}

[pageName="weDo"] .sec01 .cont_box .txt_or{width:8.25rem;height:8.25rem;position:relative;}
[pageName="weDo"] .sec01 .cont_box .txt_or >.inline-block{width:100%;height:100%;position:relative;z-index:2;background:#232323;border-radius:50%;}

[pageName="weDo"] .sec01 .cont_box .txt_or.hidden-xs{position:absolute;top:50%;right:0;transform:translate(calc(50% + 2.8125rem), -50%);}
[pageName="weDo"] .sec01 .cont_box .txt_or .blueline{width:300%;border-top:2px solid var(--pointcolor);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
[pageName="weDo"] .sec01 .cont_box .txt_or_m .blueline{width:100vw;}

[pageName="weDo"] .sec02 .pointTxt{display:inline !important;box-shadow:inset 0 -1.3em 0 var(--pointcolor2);}
[pageName="weDo"] .sec02 .cont_box .img{width:100%;}
[pageName="weDo"] .sec02 .cont_box .txt{margin-top:3.125rem;}
[pageName="weDo"] .sec02 .cont_box .txt ul{padding:0 1em;}
@media(max-width:768px){
    [pageName="weDo"] .sec02 .cont_box{display:flex;width:100%;}
    [pageName="weDo"] .sec02 .cont_box .img{width:45%;}
    [pageName="weDo"] .sec02 .cont_box .txt{width:55%;padding-left:5%;text-align:left;font-size:3.2vw;margin-top:0;gap:0;}
    [pageName="weDo"] .sec02 .cont_box .txt .box{height:calc(100% / 3);display:flex;align-items:center;}
    [pageName="weDo"] .sec02 .cont_box .txt ul{width:90%;padding:1em 0;}
}

[pageName="weDo"] .sec03 .box{cursor:pointer;}
[pageName="weDo"] .sec03 .box .img{position:relative;padding:1em 0.7em;transition:all 0.1s ease-in-out;}
[pageName="weDo"] .sec03 .box .img:after{content:'';display:none;position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid var(--pointcolor);border-bottom:0;transition:all 0.1s ease-in-out;}
[pageName="weDo"] .sec03 .box .img img{margin-top:1em;}
[pageName="weDo"] .sec03 .box .img .arr{width:3.125rem;height:.5625rem;background:url(/images/sub/weDo/sec03_icon01.png)no-repeat center center /cover;}
[pageName="weDo"] .sec03 .box .txt{height:5.5rem;padding:1em;background:#282828;transition:all 0.1s ease-in-out;}
[pageName="weDo"] .sec03 .box:hover .img{color:var(--pointcolor);}
[pageName="weDo"] .sec03 .box:hover .img .arr{background-image:url(/images/sub/weDo/sec03_icon01_h.png);}
[pageName="weDo"] .sec03 .box:hover .img:after{display:block;}
[pageName="weDo"] .sec03 .box:hover .txt{background:var(--pointcolor);}

[pageName="weDo"] .popDim{display:none;width:100%;height:100vh;position:fixed;top:0;bottom:0;left:0;right:0;background:#000;opacity:0.9;z-index:9990;}
[pageName="weDo"] .popContWrap{display:none;position:fixed;top:50%;left:50%;margin:auto;max-width:1540px;z-index:9999;transform:translate(-50%, calc(-50% + 30px));width:90%;--swiper-navigation-color:#fff;}
[pageName="weDo"] .popContWrap .popcont{overflow-y:auto;max-height:85vh;}
[pageName="weDo"] .popContWrap img{margin-left:auto;margin-right:auto;}
[pageName="weDo"] .popContWrap .closePopup{width:1.875rem;height:1.875rem;position:absolute;top:0;right:0;z-index:2;cursor:pointer;transform:translateX(100%);}
[pageName="weDo"] .popContWrap .closePopup:before,
[pageName="weDo"] .popContWrap .closePopup:after{content:'';display:block;position:absolute;top:50%;left:0%;width:100%;height:2px;background:#fff;margin:auto;}
[pageName="weDo"] .popContWrap .closePopup:before{transform:rotate(45deg);}
[pageName="weDo"] .popContWrap .closePopup:after{transform: rotate(-45deg);}

[pageName="weDo"] .popContWrap .swiper-pagination{bottom:55%;}
[pageName="weDo"] .popContWrap .swiper-pagination-bullet{width:12px;height:12px;background:#e9e9e9;opacity:1;}
[pageName="weDo"] .popContWrap .swiper-pagination-bullet-active{background:var(--pointcolor);}
[pageName="weDo"] .popContWrap .swiper-button-prev{left:0;transform:translateX(-110%);}
[pageName="weDo"] .popContWrap .swiper-button-next{right:0;transform:translateX(110%);} 
@media(min-width:769px){
    [pageName="weDo"] .popContWrap img{max-height:85vh;}
    [pageName="weDo"] .popContWrap .swiper-pagination{bottom:10%;left:50%;width:70%;max-width:1540px;text-align:left;transform:translateX(-50%);}
}
@media(max-width:768px){
    [pageName="weDo"] .popContWrap{max-width:400px;}
    [pageName="weDo"] .popContWrap .closePopup{top:1.25rem;right:1.25rem;transform:none;}
    [pageName="weDo"] .popContWrap .closePopup:before,
    [pageName="weDo"] .popContWrap .closePopup:after{background:var(--pointcolor3);}
    [pageName="weDo"] .popContWrap .swiper-button-prev,
    [pageName="weDo"] .popContWrap .swiper-button-next{display:none;}
}
@media(max-width:500px){
    [pageName="weDo"] .sec03 .box .img{font-size:3.6vw;}
}

[pageName="weDo"] .sec04{background:url(/images/sub/weDo/sec04_bg.jpg)no-repeat center center /cover;background-attachment:fixed;}
[pageName="weDo"] .sec04 .titwrap .line{display:block;width:1px;height:3rem;border-right:1px solid #9e9f9f;margin:1.875rem auto;}
@media(max-width:768px){
    [pageName="weDo"] .sec04{background-image:url(/images/sub/weDo/sec04_bg_m.jpg);background-attachment:scroll;}
}
@media(max-width:500px){
    [pageName="weDo"] .sec04 .titwrap .font-40{font-size:5vw;}
    [pageName="weDo"] .sec04 .titwrap .font-90{font-size:9.2vw;}
}


/* ===================================
    portfolio
====================================== */
[pageName="portfolio"] .sec01{background:url(/images/sub/portfolio/sec01_bg.jpg)no-repeat center center /cover;}
[pageName="portfolio"] .sec01 .flexList{--x-gap:.625rem; --y-gap:.625rem;}
[pageName="portfolio"] .sec01 .box{position:relative;}
[pageName="portfolio"] .sec01 .box .hover{position:absolute;top:0;left:0;margin:auto;z-index:2;opacity:0;transition:all 0.1s ease-in-out;}
[pageName="portfolio"] .sec01 .box:hover .hover{opacity:1;}
[pageName="portfolio"] .sec02 .section_icon{position:absolute;top:0;left:50%;transform:translate(-50%, -50%);text-align:center;}
[pageName="portfolio"] .sec02 .section_icon .line{width:1px;height:11.625rem;border-right:1px solid var(--pointcolor);margin:auto;}
[pageName="portfolio"] .sec02 .section_icon .line:after{content:'';position:absolute;bottom:0;left:50%;width:3.5rem;height:3.5rem;border-radius:50%;border:1px solid var(--pointcolor);transform:translate(-50%, 50%);}

[pageName="portfolio"] .sec02 .logoPop{gap:0;}
[pageName="portfolio"] .sec02 .logoPop .box{border-collapse:collapse;border:1px solid #eee;position:relative;cursor:pointer;}
[pageName="portfolio"] .sec02 .logoPop .box .img_h{width:0;height:0;z-index:-90;}
@media(min-width:769px){
    [pageName="portfolio"] .sec02 .logoPop .box .img_h{width:100%;height:100%;position:absolute;top:50%;left:50%;margin:auto;transform:translate(-50%, -50%);padding:0;opacity:0;transition:all 0.1s ease-in-out;background:var(--pointcolor);display:flex;z-index:3;}
[pageName="portfolio"] .sec02 .logoPop .box:hover .img_h{width:115%;height:115%;opacity:1;}
}



/* [pageName="portfolio"] .popDim{display:none;width:100%;height:100vh;position:fixed;top:0;left:0;background:#000;opacity:0.9;z-index:9990;}
[pageName="portfolio"] .popContWrap{display:none;position:fixed;top:50%;left:50%;margin:auto;max-width:1580px;max-height:860px;width:80%;height:86vh;z-index:9999;transform:translate(-50%, calc(-50% + 30px));--swiper-navigation-color:#fff;} */



/* [pageName="portfolio"] .popDim{width:100%;height:100vh;position:absolute;visibility:hidden;top:0;background:#000;opacity:0.9;}
[pageName="portfolio"] .popContWrap{position:absolute;visibility:hidden;top:0;margin:auto;max-width:1580px;max-height:860px;width:80%;height:86vh;z-index:9999;transform:translate(-50%, calc(-50% + 30px));--swiper-navigation-color:#fff;}
[pageName="portfolio"] .popDim.popAct{position:fixed;top:0;left:0;visibility:visible;z-index:9990;}
[pageName="portfolio"] .popContWrap.popAct{position:fixed;top:50%;left:50%;visibility:visible;} */



[pageName="portfolio"] .popDim{display:none;width:100%;height:100vh;position:fixed;top:0;left:0;background:#000;opacity:0.9;z-index:9990;}
[pageName="portfolio"] .popContWrap .popcont{display:none;position:fixed;top:50%;left:50%;margin:auto;max-width:1580px;max-height:860px;width:80%;height:80vh;z-index:9999;transform:translate(-50%, calc(-50% + 30px));}






[pageName="portfolio"] .popContWrap .box::-webkit-scrollbar{}
[pageName="portfolio"] .popContWrap .box::-webkit-scrollbar-track{-webkit-box-shadow:none;box-shadow:none;border-radius:0;background-color:#f4f4f4}
[pageName="portfolio"] .popContWrap .box::-webkit-scrollbar-thumb{border-radius:0;border:2px solid #f4f4f4;}


/* [pageName="portfolio"] .popContWrap .popcont{width:100%;height:100%;} */
[pageName="portfolio"] .popContWrap .popcont .portfolioSlide{width:100%;height:100%;border-radius:.625rem;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap{width:100%;height:100%;--x-gap:0;--y-gap:0;overflow:hidden;}

[pageName="portfolio"] .popContWrap .popcont .innerwrap .imgdiv{height:100%;overflow-y:auto;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .imgdiv .img{position:relative;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .imgdiv .img:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;box-shadow:inset -7px 0 20px 0 rgba(0,0,0,0.35);}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv{height:100%;background:#fff;display:flex;justify-content:center;align-items:center;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt{width:80%;margin-left:auto;margin-right:auto;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .wrap{position:relative;border-top:1px solid #000;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .wrap .tag{position:absolute;top:0;left:50%;margin:auto;display:inline-block;min-width:10em;background:#000;border-radius:.9375rem;padding:0.1em 0;transform:translate(-50%, -50%);}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .wrap .cont{padding:2.5rem 0;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .wrap .cont .roundwrap{border:1px solid #8c8c8c;border-radius:.625rem;padding:1.875rem;min-height:10rem;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .wrap .cont .roundwrap li+li{margin-top:0.5em;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .wrap .cont .roundwrap .num-count:before{width:1.25rem;height:1.25rem;display:inline-flex;justify-content:center;align-items:center;border-radius:50%;background:var(--pointcolor);color:#fff;font-weight:700;font-size:.9375rem;margin-right:0.5em;}
[pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .img img{max-width:60%;margin-left:auto;margin-right:auto;}

[pageName="portfolio"] .popContWrap .closePopup{width:1.875rem;height:1.875rem;position:absolute;top:0;right:0;z-index:2;cursor:pointer;transform:translateX(100%);}
[pageName="portfolio"] .popContWrap .closePopup:before,
[pageName="portfolio"] .popContWrap .closePopup:after{content:'';display:block;position:absolute;top:50%;left:0%;width:100%;height:2px;background:#fff;margin:auto;}
[pageName="portfolio"] .popContWrap .closePopup:before{transform:rotate(45deg);}
[pageName="portfolio"] .popContWrap .closePopup:after{transform: rotate(-45deg);}
[pageName="portfolio"] .popContWrap .swiper-button-prev{left:0;transform:translateX(-110%);}
[pageName="portfolio"] .popContWrap .swiper-button-next{right:0;transform:translateX(110%);} 
@media(max-width:768px){
    [pageName="portfolio"] .popContWrap .closePopup{top:1.25rem;right:1.25rem;transform:translateX(190%);}

    [pageName="portfolio"] .popContWrap{}
    [pageName="portfolio"] .popContWrap .popcont .portfolioSlide{}
    [pageName="portfolio"] .popContWrap .popcont .innerwrap .imgdiv{max-height:50%;}
    [pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv{max-height:50%;overflow-y:auto;display:block;padding:3em 0;}
    [pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .font-30{font-size:2.47vw;}
}
@media(max-width:500px){
    [pageName="portfolio"] .font-100{font-size:10.4vw;}
    [pageName="portfolio"] .popContWrap .popcont .innerwrap .txtdiv .txt .font-30{font-size:2.8vw;}
}