@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

.viewproject_ico{position: relative;}
.viewproject_ico::after{content: ''; clear: both; display: block; background-image: url(/img/ico_arrow_b.svg); background-repeat: no-repeat; background-size: cover; background-position: center; width: 24px; height: 24px; position: absolute; top: 23px; left: 50%; transform: translateX(-50%);}

/* 硫붿씤鍮꾩��� */
main .main_visual{margin: 0; width: calc(100% - 60px); margin-left: 30px;height: calc(100vh - 130px); overflow: hidden; border-radius: 20px;}
main .main_visual main .main_visual{height: 100%;}
.main_visual h2{font-family: "Poppins",  "NanumSquareNeoHeavy", sans-serif; font-weight: 800; font-size:12rem;}
.main_visual p{font-size:3rem;  font-weight: 600; line-height: 120%;}
.main_visual .section-fullheight__inner_mobile{height:100%;}
/* main .main_visual .canvas-wrapper,
main .main_visual .canvas-wrapper canvas {width:100% !important; height:100% !important;} */
main .main_visual .ta-img {display:none;}
main .main_visual #moslider{display: none;}

.overflow-vi > *{overflow: visible !important; -webkit-clip-path: unset; clip-path: unset;}
.homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2{font-weight: 800; font-size: 11rem; color:#0C0C0D; font-family: 'Poppins', sans-serif; line-height: 78px; letter-spacing: -3.3px;}
.homepage h2{line-height: 99.5px;}
.subtit{font-size: 3rem; line-height: 40px; margin-top: 40px; margin-bottom: 60px;  font-family: 'NanumSquareNeo', sans-serif; font-weight: 300;}
.subtit b{font-weight: 700;}

.section_rolling{ padding:0 30px; box-sizing: border-box; margin: 0 auto;}
.section_rolling .height-container{min-height: 320px;}
.section_rolling .transition-container > ul li{font-weight: 800; text-transform: uppercase; line-height: 220px; letter-spacing: -7.5px; font-family: "Poppins", sans-serif; color: #ffffff;}
.section_rolling .text1 li{font-size: 21.5rem; color: rgba(46, 46, 47, 0.00); -webkit-text-stroke: 1px #AEAEAE; letter-spacing: -6.45px;}
.section_rolling .text2 li{font-size: 25rem;}
.section_rolling .text2 li b{position: relative; display: inline-block;}
.section_rolling .text2 li b::after{content: ''; clear: both; width: 165px; height: 30px; background: #0b2294; position: absolute; display: block; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.transition-container {height: 100%; overflow: hidden; transform: translateZ(0);}
.transition-container > ul.text1{max-height: 220px; padding: 0;}
.transition-container > ul.text2{max-height: 220px; margin-bottom: 0; padding: 0;}
.transition-container2{margin-top: -114px;}

.section.homepage .horizontal-scroll__wrapper{position: relative;}
/* .section.homepage .pt-header-height{transform: none !important; background: #fff; position: relative; z-index: 9; transition: width 0.4s ease-in-out;}
.section.homepage .pt-header-height.on{width: 30% !important;} */

/* Mobile Web & App */
.rounded-50{border-radius: 50px;}
.fit-content{width: fit-content;}
.m-auto{margin: 0 auto;}
.section.mobilewebapp .container-fluid-gutters{display: flex !important; justify-content: center; flex-direction: column; gap: 50px;}
.section.mobilewebapp .infinite-list__heading-item{transition: 0.3s;}
.section.mobilewebapp .infinite-list__heading-item:hover{opacity: 1 !important;}
.section.mobilewebapp .infinite-list__heading-item h2.h3{font-size: 6rem; font-weight: 350; letter-spacing: -1.2px; font-family: "NanumSquareNeo", sans-serif; position: relative; transition: 0.3s;}
.section.mobilewebapp .infinite-list__heading-item:hover h2.h3{font-weight: 900;}
.section.mobilewebapp .infinite-list__heading-item:hover h2.h3::after{content: ''; clear: both; display: block; width: calc(100% + 4px); background: #7EE3D8; height: 10px; position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; left: -2px;}

/* design */
main .section.design .section-body{max-width: 1960px;}
main .section.design .img-wrap .img-con{padding-left: 0;padding-top: 500px;}
main .section.design .img-wrap .img-con li{width: 31.5%; opacity: 0; /* 珥덇린 �곹깭�� 蹂댁씠吏� �딆쓬 */transform: scale(0.5); /* �꾨옒�� �묎쾶 �꾩튂 */}
main .section.design .img-wrap .img-con li:nth-child(odd){margin-left: auto;}
main .section.design .img-wrap .img-con li:nth-child(odd) .subheading{width: 100%; display: block; text-align: end;}
main .section.design .img-wrap .img-con li + li{margin-top: -60px;}
main .section.design .img-wrap .img-con li a .it-box{position: relative;}
main .section.design .img-wrap .img-con li a h3{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #fff; font-weight: 800; opacity: 0; transition: 0.3s all;}
main .section.design .img-wrap .img-con li a .imgbox{transition: 0.3s all;}
main .section.design .img-wrap .img-con li:hover a h3{opacity: 1;}
main .section.design .img-wrap .img-con li:hover a .imgbox::before{content: ''; clear: both; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.3);}
/* main .section.design .section-column:last-child{position: absolute; left: 50%; transform: translateX(-50%);}*/
/* main .section.design .section-column{position: relative; overflow: visible; height: 100%;}
main .section.design .tit-area{position: sticky; top: 0; left: 50%; transform: translateX(-50%); width: 33.333%;} */
main .section.design .pin-spacer{left: 0 !important;}
main .section.design .tit-area{/*position: absolute; top: 50vh; left: 50%; transform: translate(-50%, -50%);width: 33.333%;*/position: absolute; width: 100%; height: 100vh;}
main .section.design .tit-area.on{position: fixed; top: 50%;}

/* shopping */
.section.shopping .tit-box h2{line-height: 125px;}
.hoverbtn{width: 160px; height: 160px; border-radius: 500px; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s all; z-index: 1;}
.hoverbtn.viewbtn{background-color: transparent; border: 1px solid #fff; box-sizing: border-box;}
.hoverbtn.viewbtn.bl{background-color: #fff;}
.hoverbtn.viewbtn.bl b{color: #2E2E2F;}
.hoverbtn.viewbtn.bl p{margin: 0;}
.hoverbtn b{font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 24px; margin-top: 20px; font-family: "Poppins", sans-serif; text-transform: uppercase;}

.shopping.section .cont-wrap .con{transition: unset; margin-bottom: 50px;}
.shopping.section .cont-wrap .con p{font-size: 14px;color: #ffffff;letter-spacing: -0.01rem;margin: 12px 0px;line-height: 1.6;}
.shopping.section .cont-wrap .con + .con{margin-top: 20px;}
.shopping.section .section-row > *{width: 50% !important;}

@media (min-width: 1400px) {
    .homepage .hover-zoom:hover:not(:focus) .hover-zoom__inner {
        transform: inherit;
        --overlay-opacity: 0 !important
    }
    .homepage .hover-zoom__inner .portfolio-item__overlay {
        transition: unset !important;
    }
}

.section.shopping h3{font-size:4rem; color:#ffffff !important; letter-spacing: -0.2rem;font-weight: bold;}
.section.shopping h3 b{color: #009f31 !important;font-weight: bold;}
.section.shopping .subheading {font-weight: 600; font-size:1.2rem ; color:#666; letter-spacing: -0.01rem;}
.mobile h3{font-weight: 800; font-size:4rem; color:#0C0C0D;}
.mobile h3 .subtitle{font-weight: 400; font-size:1.4rem; color:#0C0C0D; display:block;}
.mobile img.bd-1{border:1px solid #e1e1e1;}

/* .section.shopping{height: 100vh; overflow: hidden;}
.section.shopping .section-column{position: relative;} */
/* .section.shopping .tit-area{position: absolute; top: 50%; transform: translateY(-50%);} */
.swiper-container-wrapper {flex-flow: row nowrap;}
.sticky-wrap .sticky-tit {position: sticky; top: 160px; left: 0;}
.realItrcCont .realItrcCon._1 {background:linear-gradient(135deg,#ffa800,#ff5d17);}
.realItrcCont .realItrcCon._2 {background:linear-gradient(135deg,#12d6f0,#12f093);}
.realItrcCont .realItrcCon._3 {background:linear-gradient(135deg,#3f1ca0,#a912f0);}
.realItrcCont .realItrcCon._4 {background:linear-gradient(135deg,#eb3656,#fea032);}
.realItrcCont .realItrcCon._5 {background:linear-gradient(135deg,#fff6a5,#ffb1b1);}
.realItrcCont .realItrcCon._6 {background:linear-gradient(135deg,#ffa800,#ff5d17);}
.realItrcCont .realItrcCon._7 {background:linear-gradient(135deg,#12d6f0,#12f093);}
.realItrcCont .realItrcCon._8 {background:linear-gradient(135deg,#3f1ca0,#a912f0);}
.realItrcCont .realItrcCon > div {width:100%; height:100%; position:relative; margin:0; padding:0; box-sizing:border-box;}
.realItrcCont .realItrcCon .disT {}
.realItrcCont .realItrcCon .disTC {text-align:center; vertical-align:middle;}
.realItrcCont .realItrcCon .thumbnail {width:100%; position:relative; margin:0 auto; padding:60px 0 30px; box-sizing:border-box;}
.realItrcCont .realItrcCon .thumbnail img {display:block; width:100%;}
.realItrcCont .realItrcCon .description {width:100%; position:relative; text-align:left; margin:0 auto; padding:0 2.0rem; box-sizing:border-box;}
.realItrcCont .realItrcCon .description p {display:inline-block; width:calc(50% - 4px); vertical-align:top; text-align:left; position:relative; margin:0; padding:0; box-sizing:border-box; font-size: 1.4rem; font-weight:700; color:#000; font-family: var(--h2-font-family);}
.realItrcCont .realItrcCon .description p:nth-of-type(2n+2) {text-align:right;  letter-spacing: -1px;}
.realItrcCont .realItrcCon .link {display:block; text-align:center; position:relative; margin:0 auto; padding:0; box-sizing:border-box; font-size:6.4rem; line-height:7.0rem; font-weight:700; color:#fff;}
.realItrcCont .realItrcCon .h3{ font-weight:900; color:#fff; font-size: 6.4rem; letter-spacing: -1.92px;}
.section.shopping .con-list{padding-left: 0;}
.section.shopping .con-list .con .img{position: relative;}
.section.shopping .con-list .con:hover .hoverbtn{opacity: 1;}

/* mobilewebapp */
.section.mobilewebapp{overflow: hidden;}
.section.mobilewebapp .section-body{max-width: 1960px;}
.section.mobilewebapp .mockup-wrapper {position: relative;}
.section.mobilewebapp .swiper{position: relative; max-width: 350px; height: 700px; }
.section.mobilewebapp .swiper .swiper-slide:last-child{margin-bottom: 0 !important;}
.section.mobilewebapp .swiper .swiper-slide a{display: block; padding: 15.7px 17px; width: 100%; height: 100%;}
.section.mobilewebapp .swiper .swiper-slide a img{width: 100%; height: 275px;}
.section.mobilewebapp .swiper .swiper-slide a .motxt{display: none;}
.section.mobilewebapp .mockup{position: absolute; top: 0; width: 100%; height: 100%;}
.section.mobilewebapp .mockup:hover .hoverbtn{opacity: 1;}
.section.mobilewebapp .mockup img{width: 100%; height: 100%;}
.section.mobilewebapp .text{padding-left: 0; margin-bottom: 0;}
.section.mobilewebapp .text li{}
.section.mobilewebapp .text li a{display: block; font-size: 6rem; font-weight: 350; letter-spacing: -1.2px; font-family: "NanumSquareNeo", sans-serif; position: relative; transition: 0.3s; line-height: 1; color: #fff; opacity: 0.8;}
.section.mobilewebapp .text li:hover a, .section.mobilewebapp .text li.on a{font-weight: 900; opacity: 1;}
.section.mobilewebapp .text li:hover a::after, .section.mobilewebapp .text li.on a::after {content: ''; clear: both; display: block; width: calc(100% + 4px); background: #0000ff; height: 10px; position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; left: -2px;}
.l-swiper .swiper-slide, .r-swiper .swiper-slide {opacity: 0.2; /* 湲곕낯�곸쑝濡� �먮━寃� �쒖떆 */ transition: opacity 0.3s ease;}
.l-swiper .swiper-slide-active, .r-swiper .swiper-slide-active {opacity: 1; /* �쒖꽦�붾맂 �щ씪�대뱶 */}

/* landing */
.landing .pricing-table:hover .pricing-table__overlay{opacity: 0.7;}
.landing .pricing-table:hover .pricing-table__subtxt{color: #fff;}
.landing .pricing-table__header h3{font-size: 6rem; font-weight: 350; letter-spacing: -1.8px; line-height: 60px;}
.landing .pricing-table__header .pricing-table__subtxt{font-size: 2.0rem; font-weight: 400; line-height: 30px; letter-spacing: -0.6px; text-transform: uppercase; margin-bottom: 0;}
/* .landing  .pricing-table{max-width:1480px; margin:0 auto;} */
.disT {display:table !important; position:relative; width:100%; height:100%;}
.disTC {display:table-cell !important; position:relative; text-align:center; vertical-align:middle;}
main .section.solution{max-width:1480px;}
.tit-area .tit-box em {font-size: 2.4rem; font-weight: 350; line-height: 1; text-transform: capitalize; letter-spacing: -0.9px; text-align: center; display: block; color: #000; font-style: normal;}
.solution .portfolio-card > a {display:block; width:100%; height:0; position:relative; margin:0; padding:0; box-sizing:border-box; padding-bottom:100%; overflow:hidden;}
.solution .portfolio-card .rect {width:100%; height:100%; position:relative;  border-radius:2.0rem; overflow: hidden;}
.solution .portfolio-card .rect .off {z-index:1;}
.solution .portfolio-card .rect .on {width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; opacity:0; transform:scale(1.4); filter:blur(10px);
transition:all 0.6s ease;
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
}
.solution .portfolio-card .rect .typo {width:100%; height:100%; position:absolute; top:0; left:0; z-index:3; background:rgba(0,0,0,0);
transition:all 0.6s ease;
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
}
.solution .portfolio-card .rect > * p {display:block; position:relative; margin:0; padding:0; box-sizing:border-box; font-size: 1.6rem; line-height: 11px; font-weight: 800; letter-spacing: -0.48px; color: #fff; font-family: 'NanumSquare', sans-serif;}
.solution .portfolio-card .rect .typo .disTC {text-align:left; vertical-align:bottom; padding: 36px 30px; box-sizing:border-box;}
.solution .portfolio-card .rect .typo .t2 {font-size: 2.0rem; font-weight: 800; line-height: 14px; letter-spacing: -0.6px; margin-top: 15px;}
.solution .portfolio-card:hover .rect .on {opacity:1; transform:scale(1.0); filter:blur(0px);}
.solution .portfolio-card:hover .rect .typo {background:rgba(0,0,0,0.6);}

.solution .row > *{padding-right:calc(var(--bs-gutter-x) * .15); padding-left:calc(var(--bs-gutter-x) * .15); margin-top:calc(var(--bs-gutter-y)* .3);} 
/*.solution .row {margin-left: -20px; margin-top: -20px;}
.solution .row > *{padding-right: 0; padding-left: 20px; margin-top: 20px;}
.solution .row > *:last-child{margin-top: 80px; margin-left: 0; padding-left: 0;}*/

/* 硫붿씤�섏씠吏� �쒖옉臾몄쓽 �곸뿭 :: S */
.con ._t {position:relative; margin:0; padding:0; box-sizing:border-box; font-size:1.6rem; line-height:2.4rem; font-weight:500; color:#000;}
.con ._t.tit {font-size:11.0rem; line-height:12.0rem; font-weight:900;}
.con ._t.tit.sub {font-size: 10rem; line-height:11.0rem; font-weight:800; color:#fff; margin: 0 auto;}
.con ._t.tit.sm {font-size:6.0rem; line-height:6.8rem;}
.con ._t.t1 {font-size:3.0rem; line-height:3.6rem; font-weight:400;}
.con ._t.t2 {font-size:2.0rem; line-height:3.0rem; font-weight:400; color:#606060;}
.con ._ts {/*display:flex; flex-direction: column;*/ position:relative; margin:0 auto 6.0rem; padding:0; box-sizing:border-box; min-height:130px;}
.con ._ts:last-child {margin:0 auto;}
.con ._ts > * {margin:0 auto 4.0rem;}
.con ._ts > *:last-child {margin:0 auto;}

.typing-txt {color:#fff; font-size: 40px;; line-height: 1.3; display: inline; word-break: keep-all; word-wrap: break-word; font-weight:500; font-family:'NanumSquare', sans-serif; text-align:center; vertical-align: middle; }
/* ���댄븨 而ㅼ꽌 �ㅽ��� */
.typed-cursor {
    opacity: 1;
    color: #fff;  /* 而ㅼ꽌 �됱긽�� �곗깋�쇰줈 �ㅼ젙 */
    background-color:#fff;
    animation: typedjsBlink 0.7s infinite;
    -webkit-animation: typedjsBlink 0.7s infinite;
    height: 120px;
    width: 1px;
    display:inline-block;
    vertical-align: middle;
}

@keyframes typedjsBlink {
    50% { opacity: 0.0; }
}

@-webkit-keyframes typedjsBlink {
    0% { opacity: 1; }
    50% { opacity: 0.0; }
    100% { opacity: 1; }
}

.footer {width:100%; position:relative; margin:0 auto; padding:0; box-sizing:border-box;}
.footer .con {width:100%; position:relative; margin:0 auto 8.0rem; padding:0; box-sizing:border-box;}

.contactUsWrap.con {margin:0 auto; height: calc(100% - 208px); overflow:hidden; background:#0C0C0D;}
.contactUsWrap > div {width:100%; height:100%; position:absolute; top:0; left:0; margin:0; padding:0;}
.contactUsWrap .disT {}
.contactUsWrap .disTC {text-align:center; vertical-align:middle; padding:15px; box-sizing:border-box;}
@keyframes gatherAndSpread {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(var(--circle-x), var(--circle-y));
  }
}

.contactUsWrap .contactBtn .circle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  animation: gatherAndSpread 1s ease-in-out alternate infinite;
}

/* 媛� �먯쓽 理쒖쥌 �꾩튂瑜� 而ㅼ뒪�� �띿꽦�쇰줈 �ㅼ젙 */
.contactUsWrap .contactBtn .circle._1 {--circle-x: 0; --circle-y: -3rem; border:1px solid rgba(255,255,255,0.7);}
.contactUsWrap .contactBtn .circle._2 {--circle-x: 0; --circle-y: -2rem; border:1px solid rgba(255,255,255,0.7);}
.contactUsWrap .contactBtn .circle._3 {--circle-x: 0; --circle-y: -1rem; border:1px solid rgba(255,255,255,0.7);}
.contactUsWrap .contactBtn .circle._4 {--circle-x: 0; --circle-y: 1rem; border:1px solid rgba(255,255,255,0.3);}
.contactUsWrap .contactBtn .circle._5 {--circle-x: 0; --circle-y: 2rem; border:1px solid rgba(255,255,255,0.3);}
.contactUsWrap .contactBtn .circle._6 {--circle-x: 0; --circle-y: 3rem; border:1px solid rgba(255,255,255,0.3);}

/* �몃쾭 �� 紐⑤뱺 �먯씠 �먮옒 �먮━濡� �좎� */
.contactUsWrap .contactBtn:hover .circle {
  animation: none;
  transform: translate(var(--circle-x), var(--circle-y));
}

.contactUsWrap .contactBtn {display:block; width:34.5rem; height:34.5rem; position:relative; margin:0 auto; padding:0; box-sizing:border-box; border-radius:50%; /* transform:rotate(315deg); */ transform:rotate(-45deg); }
.contactUsWrap .contactBtn span {display:block; width:34.5rem; height:34.5rem; position:relative; text-align:center; margin:0; padding:0; box-sizing:border-box; border-radius:50%; font-size:3.2rem; line-height:34.5rem; font-weight:900; color:#fff; font-family:'NanumSquare', sans-serif;}
.contactUsWrap .contactBtn span:first-child {border:1px solid rgba(255,255,255,0.8); /* background:rgba(41,212,193,0.0); */ background:rgba(255,255,255,0.0);}
.contactUsWrap .contactBtn span:first-child:after {display:inline-block; content:''; position:relative; vertical-align:middle; width:0.8rem; height:0.8rem; background:#29D4C1; border-radius:50%; margin:-3.5rem 0 0 3.0px; padding:0; box-sizing:border-box;}
.contactUsWrap .contactBtn .circle {position:absolute; top:0; left:0;}
.contactUsWrap .contactBtn .circle._1 {}
.contactUsWrap .contactBtn .circle._2 {}
.contactUsWrap .contactBtn .circle._3 {}
.contactUsWrap .contactBtn .circle._4 {}
.contactUsWrap .contactBtn .circle._5 {}
.contactUsWrap .contactBtn .circle._6 {}

.contactUsWrap .contactBtn,
.contactUsWrap .contactBtn span,
.contactUsWrap .contactBtn span:after {
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
}

.contactUsWrap .contactBtn:hover {transform:rotate(0deg);}
.contactUsWrap .contactBtn:hover span {color:#fff;}
.contactUsWrap .contactBtn:hover span:first-child {background:rgba(41,212,193,1.0); /* background:rgba(255,255,255,0.95); */  border:1px solid rgba(41,212,193,1.0);}
.contactUsWrap .contactBtn:hover span:first-child:after {background:#fff;}
.contactUsWrap .contactBtn:hover .circle._1 {top:0rem; border:1px solid rgba(255,255,255,0);}
.contactUsWrap .contactBtn:hover .circle._2 {top:0rem; border:1px solid rgba(255,255,255,0);}
.contactUsWrap .contactBtn:hover .circle._3 {top:0rem; border:1px solid rgba(255,255,255,0);}
.contactUsWrap .contactBtn:hover .circle._4 {top:0rem; border:1px solid rgba(255,255,255,0);}
.contactUsWrap .contactBtn:hover .circle._5 {top:0rem; border:1px solid rgba(255,255,255,0);}
.contactUsWrap .contactBtn:hover .circle._6 {top:0rem; border:1px solid rgba(255,255,255,0);}

/* 硫붿씤�섏씠吏� �쒖옉臾몄쓽 �곸뿭 :: E */

/* �명꽣 �곸뿭 :: S */
.footerWrap {width:100%; position:relative; margin:0 auto; padding:0; box-sizing:border-box; background:#0C0C0D;}
.footerWrap .footer {width:100%; max-width:1730px; position:relative; margin:0 auto; padding:50px 40px; border-top:1px solid #999;}
.footerWrap .footer .area {display:inline-block; position:relative; vertical-align:top; margin:0; padding:0; box-sizing:border-box;}
.footerWrap .footer .area a,
.footerWrap .footer .area p {display:inline-block; position:relative; margin:0; padding:0; box-sizing:border-box; font-size:1.4rem; line-height:2.4rem; font-weight:400; color:#999;}
.footerWrap .footer .area a.logo {font-weight:800; color:#fff; margin-bottom:1.0rem;}
.footerWrap .footer .area p.copyright {font-weight:300; margin-top:1.0rem;}
.footerWrap .footer .area p {}
.footerWrap .footer .area p span {display:inline-block; position:relative; vertical-align:middle; margin:0 8px 0 0; padding:0 12px 0 0;}
.footerWrap .footer .area p span:after {display:block; content:''; width:1px; height:12px; position:absolute; top:50%; right:0; margin:-6px 0 0 0; background:#777;}
.footerWrap .footer .area p span:last-child {margin:0; padding:0;}
.footerWrap .footer .area p span:last-child:after {display:none;}

.footerWrap .footer .area .util {}
.footerWrap .footer .area .util > * {display:inline-block; width:auto; height:60px; position:relative; text-align:left; vertical-align:middle; margin:0 0.5rem 0 0; padding:0; box-sizing:border-box; border-radius:10px; border:1px solid #333; font-size:1.4rem; line-height:60px; font-weight:500; color:#fff;}
.footerWrap .footer .area .util .familySite {width:240px;}
.footerWrap .footer .area .util .familySite .cur {display:block; width:100%; height:60px; position:relative; margin:0; padding:0 20px; box-sizing:border-box; line-height:60px;}
.footerWrap .footer .area .util .familySite .cur:after {display:block; content:''; width:10px; height:6px; position:absolute; top:50%; right:20px; margin:-3px 0 0 0; background-size:cover !important; background:url('/img/cm_icon_select_arrow_1.png') center center no-repeat; transform:rotate(180deg);
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
}
.footerWrap .footer .area .util .familySite ul {display:block; width:100%; height:0; position:absolute; bottom:110%; left:0; margin:0; padding:0 20px; box-sizing:border-box; border-radius:10px; border:0; background:rgba(0,0,0,0.8); overflow:hidden;}
.footerWrap .footer .area .util .familySite ul li {display:block; width:100%; height:3.6rem; position:relative; margin:0; padding:0; box-sizing:border-box;}
.footerWrap .footer .area .util .familySite ul li a {display:block; position:relative; margin:0; padding:0; font-size:1.4rem; line-height:3.6rem; font-weight:400; color:#999;}
.footerWrap .footer .area .util .familySite ul li a:hover {font-weight:600; color:#606060;}
.footerWrap .footer .area .util .social {width:60px; padding:12px; display: flex;}
.footerWrap .footer .area .util .familySite.open .cur:after {transform:rotate(0deg);}
.footerWrap .footer .area .util .familySite.open ul {height:auto; padding:15px 20px; border:1px solid #333;}

.footerWrap .footer .area._1 {text-align:left; font-family:'NanumSquare', sans-serif;}
.footerWrap .footer .area._1 > *{display: block;}
.footerWrap .footer .area._2 {text-align:right;}
.twinEle {
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
}
/* �명꽣 �곸뿭 :: E */

.pc-900, .pc-768{display: block;}
.mo-900, .mo-768{display: none;}

@media (max-width: 900px) {
    .pc-900{display: none;}
    .mo-900{display: flex; justify-content: center;}
    .section.shopping .subtit, .landing.section .subtit {margin-bottom: 20px;}
}

@media (max-width: 768px) {
    .pc-768{display: none;}
    .mo-768{display: flex; justify-content: center;}
}

/* ==================================================
    section
================================================== */

.section { width: 100%;  }
.section .section-body { width: 100%; padding: 0 20px; max-width: 1480px; margin: 0 auto;  box-sizing: border-box;   position: relative; }
.section .section-body .section-inner { padding: 0; }
#main .section .section-body { max-width: 100%; padding: 0 50px;}

#sub.dark .section {  background: #000 !important;  } 
#sub.dark .section .section-body * { color: #fff !important;}
#sub.dalight .section .section-body {  background: #FFF;  }

.section.dark {  background: #000;  } 
.section.dark .section-body * { color: #fff !important;}
.section.light .section-body {  background: #FFF;  }

.section .section-row { width: 100%; height: 100%; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex;  }
.section .section-row.column { -webkit-box-orient: vertical;  -moz-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column; }
.section .section-row.between {-webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
.section .section-row.center {-webkit-box-pack: justify; -moz-justify-content: center;  -ms-flex-pack: justify; justify-content: center;}
.section .section-row.center > * { text-align: center;}
.section .section-row .section-column { width: 100%;}

/* ==================================================
	�쒕툕�섏씠吏� 怨듯넻
================================================== */
.sub{padding-top: 80px; margin-top: 100px; color: #0C0C0D; font-family: "Poppins", sans-serif;}
.sub p, .sub h1, .sub h2, .sub h3, .sub span, .sub ul{margin: 0; padding: 0;}
.sub .page-wrapper__content{overflow: visible;}
.tit-area .tit-box {word-break: keep-all; word-wrap: break-word;}
.tit-area .tit-box h1{font-size: 10.0rem; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; text-align: center; line-height: 75px; margin: 0;}
.tit-area .tit-box h2{font-size: 7.0rem; font-weight: 800; letter-spacing: -2.1px; line-height: 1; text-transform: capitalize; margin: 0;}
.tit-area .tit-box h3{font-size: 5.5rem; font-weight: 350; line-height: 77px; letter-spacing: -1.65px; margin: 0;}
.tit-area .tit-box h3 b{font-size: 6.0rem; font-weight: 900; display: block; line-height: 84px; letter-spacing: -1.8px}
.tit-area .tit-box h4{text-align: center; font-size: 3.0rem; font-weight: 350; letter-spacing: -0.9px; line-height: 30px; margin: 0;}

.tab-area{overflow-x: auto; white-space: nowrap;}
.tab-area::-webkit-scrollbar{display: none;}
/* ==================================================
�뚯궗�뚭컻 �섏씠吏�
================================================== */
.mosvg{display: none;}
/* #sub.about .pin-spacer{max-height: 2923px;} */
#sub.about .section1 .tit-area .tit-box h4{font-size: 5.0rem; letter-spacing: -1.5px; line-height: 50px;}
#sub.about .section1 .section-body{max-width: 100%; width: 100%; padding: 0;}
#sub.about .section1 .section-body, #sub.about .section1 .section-body .section-inner, #sub.about .section1 .section-body{height: 100%;}
#sub.about .section1 .section-column + .section-column{flex-grow: 1; /* �⑥� 怨듦컙�� 李⑥��섎룄濡� �ㅼ젙 */ max-height: 100vh;}
#sub.about .section1 .video_wrap{border-radius: 30px; text-align: center; overflow: hidden; margin: 0 auto; width: 708px; height: 100vh; transition: 0.3s; max-width: 100%;}
#sub.about .section1 .video_wrap .img_wrap_con{width: 100%; object-fit: cover; height: 100%;}
#sub.about .marquee {width: 100%; overflow: hidden; white-space: nowrap; border-top: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; padding: 39px 0; box-sizing: border-box;}
#sub.about .marquee .marquee_text + .marquee_text, #sub.about .marquee .js-marquee + .js-marquee{margin-left: 49px;}
#sub.about .marquee_text {font-size: 4.0rem; font-weight: 800; color: #C9C9C9; letter-spacing: 1.2px; text-transform: uppercase; position: relative;  display: inline-block; margin-left: 49px; line-height: 60px;}
#sub.about .marquee_text::after{content: ''; clear: both; display: block; width: 9px; height: 9px; background: #D9D9D9; border-radius: 50%; position: absolute; top: 50%; left: -29px; transform: translateY(-50%);}
#sub.about .section2 {border-bottom: 1px solid #E1E1E1;}
#sub.about .section2,
#sub.about .section_history{position: relative; z-index: 99; background-color: #fff;}
#sub.about .section2 .section-body .section-inner,
#sub.about .section_history .section-body .section-inner{border-left: 1px solid #E1E1E1; border-right: 1px solid #E1E1E1; box-sizing: border-box; position: relative;}
#sub.about .section2 .section-body .section-inner {padding: 200px 0; }
#sub.about .section2 .section-body .section-inner::before,
#sub.about .section2 .section-body .section-inner::after,
#sub.about .section_history .section-body .section-inner::before,
#sub.about .section_history .section-body .section-inner::after{content: ''; clear: both; display: block; width: 1px; height: 100%; background: #E1E1E1; position: absolute; top: 0; z-index: -1;}
#sub.about .section2 .section-body .section-inner::before,
#sub.about .section_history .section-body .section-inner::before{left: 33%;}
#sub.about .section2 .section-body .section-inner::after,
#sub.about .section_history .section-body .section-inner::after{right: 33%;}
#sub.about .section2 .section-column,
#sub.about .section_history .section-column{width: 100%; max-width: 541px;}
#sub.about .section2 .section-column + .section-column,
#sub.about .section_history .section-column + .section-column{width: calc(100% - 541px); max-width: 100%; position: relative;}
/* #sub.about .section2 .section-column + .section-column::before{content: ''; clear: both; display: block; width: 1px; height: 100%; background: #E1E1E1; position: absolute; z-index: -1;} */
#sub.about .section2 .cont-area ul li:nth-child(1), #sub.about .section2 .cont-area ul li:nth-child(3){margin-left: auto; min-width: 53%;}
#sub.about .section_history .cont-area .position_list > li:nth-child(2) {width: 100%; margin-left: auto; max-width: 53%; margin-top: -85px;}
#sub.about .section_history .cont-area .last_position_list > li:nth-child(2) {margin-top: -240px;}
#sub.about .section2 .cont-area ul li:nth-child(2),
#sub.about .section_history .cont-area .position_list > li:nth-child(1){margin-left: -64px;}
#sub.about .section2 .cont-area ul li span{font-size: 1.6rem; font-weight: 700; letter-spacing: -0.48px; text-transform: capitalize; line-height: 1; display: block; width: 100%;}
#sub.about .section2 .cont-area ul li em{font-size: 3.4rem; font-weight: 350; line-height: 1; letter-spacing: -1.02px; margin-top: 14px; display: block; width: 100%;}
#sub.about .section2 .cont-area ul li p{font-size: 3.0rem; margin-top: 20px; }
#sub.about .section2 .cont-area ul li p b{font-size: 14.0rem; font-weight: 800; line-height: 1; letter-spacing: -4.2px; display: inline-block; margin-right: 10px; font-family: "Poppins", sans-serif;}
#sub.about .section_history .section-body .section-inner {padding: 100px 0 200px; box-sizing: border-box;}
#sub.about .section_history .section-column1 .tit-area {padding-top: 100px; box-sizing: border-box;}
#sub.about .section_history .section-column2 {margin-top: 270px;}
#sub.about .section_history .section-column2 .cont-area {padding-top: 100px; box-sizing: border-box;}
#sub.about .section_history .position_list {padding-top: 80px; box-sizing: border-box;}
#sub.about .section_history .tit-area .tit-box h3 { font-size: 8rem; line-height: 90px; font-weight: 300;}
#sub.about .section_history .tit-area .tit-box h3 b {font-size: 8rem; font-weight: 800;}
#sub.about .section_history .img-area {margin-top: 90px;}
#sub.about .section_history .img-area .img-box {border-radius: 30px; overflow: hidden; width: 400px; aspect-ratio: 1/1.3; position: relative;}
#sub.about .section_history .img-area .img-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-clip-path: inset(101% 0% 0% 0%); clip-path: inset(101% 0% 0% 0%); transition: -webkit-clip-path .75s; transition: clip-path .75s; transition: clip-path .75s, -webkit-clip-path .75s;}
#sub.about .section_history .img-area .img-box img.on { -webkit-clip-path: inset(-1% 0% 0% 0%); clip-path: inset(-1% 0% 0% 0%);}
#sub.about .section_history .section-column2 { width: calc(100% - 541px); max-width: 100%;}
#sub.about .section_history .history_year {padding-left: 146.6px; box-sizing: border-box;}
#sub.about .section_history .history_year,
#sub.about .section_history #fix-year {font-size: 12rem; font-weight: 700; line-height: 1; color:#0C0C0D;}
#sub.about .section_history #fix-year { position: absolute; top: 452px; width: 200%; max-width: 624px; text-align: right;}
#sub.about .section_history .position_list + .position_list {margin-top: 120px;}
#sub.about .section_history .history_list {font-family:'NanumSquareNeo', sans-serif; font-size: 1.8rem; font-weight: 350; line-height: 18px; color:#0C0C0D; opacity: 0.3; transition: .2s ease-out;}
#sub.about .section_history .history_list > li {width: fit-content; white-space: nowrap;}
#sub.about .section_history .history_list > li + li {margin-top: 30px;}
#sub.about .section_history .position_list.on .history_list {font-size: 2rem; line-height: 24px; opacity: 1;} 
#sub.about .section_history .history_list .mint {position: relative; font-weight: 700;}
#sub.about .section_history .history_list .mint::after {position:absolute; display:block; content:''; clear:both; width:8px; height: 8px; border-radius: 4px; background-color: #29D4C1; right:-16px; top: 50%; margin-top: -4px;}
#sub.about .section_history .history_list .bold {font-weight: 700;}
#sub.about .section_history.pin-going .section-column1 {margin-top: 100px !important;}
#sub.about .section_history .history_list {min-height: 50vh;}
#sub.about .section_history .last_position_list {margin-top: 120px !important; padding-bottom: 180px;}
#sub.about .section_history .last_position_list.on {margin-top: 70px !important;}
#sub.about .section_history.pin-going .last_position_list.on {margin-top: 280px !important;}
#sub.about .section_history .history_year {transition: .2s ease-out; opacity: 0.3;}
#sub.about .section_history .position_list.on .history_year {opacity: 1;}
#sub.about .section_history.pin-going .position_list.on .history_year {position: fixed; top:430px;}
/* #sub.about .section_history.pin-going .first_position_list  {margin-top: 100px;} */

@media screen and (max-height:1000px) {
    #sub.about .section_history .history_list {min-height: unset;}
}
@media screen and (max-width:1600px) {
    #sub.about .section_history .img-area {margin-top:40px;}
    #sub.about .section_history .tit-area .tit-box h3 {font-size:5.5rem; line-height: 77px;}
    #sub.about .section_history .tit-area .tit-box h3 b {font-size:6rem; line-height: 50px;}
    #sub.about .section_history #fix-year {top:315px; max-width: 597px;}
    #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size:10rem;}
    #sub.about .section_history .section-column2 {margin-top:135px;}
    #sub.about .section_history .history_year {padding-left: 121px;}
    #sub.about .section_history .history_list {width: calc(100% + 40px); font-size: 1.6rem; line-height: 1.5;}
    #sub.about .section_history .history_list > li {white-space: normal; word-break: keep-all; line-height: 1.5;}
    #sub.about .section_history .position_list.on .history_list {font-size: 1.8rem; line-height: 1.5;}
    #sub.about .section_history .history_list > li + li {margin-top: 25px;}
    #sub.about .section_history.pin-going .position_list.on .history_year {position: fixed; top:295px;}
    #sub.about .section_history .cont-area .last_position_list > li:nth-child(2) {margin-top: -200px;}

}
@media screen and (max-width:1520px) {
    #sub.about .section_history .history_list {width: 100%;}
}

.section.bg_b{background-color: #000;}
.section.bg_b .tit-box > *{color: #fff;}
#sub.about .section.bg_b .tit-box b{font-size: 8.0rem; font-weight: 800; line-height: 1; letter-spacing: -2.4px; text-transform: capitalize; white-space: nowrap;}
#sub.about .section.bg_b .tit-box b + b{display: block; margin-top: 25px;}
#sub.about .section.bg_b .tit-box > p{font-size: 2.0rem; font-weight: 700; line-height: 36px; letter-spacing: -0.6px; display: block; margin-top: 55px;}
#sub.about .section.bg_b .tit-box > em{font-size: 1.8rem; font-weight: 400; line-height: 36px; letter-spacing: -0.52px; color: #999; margin-top: 35px; display: block; text-align: start; text-transform: uppercase;}
#sub.about .section.bg_b .tit-box > em b{font-size: 1.8rem; font-weight: 800; color: #8B8B8B;}
#sub.about .section.bg_b .tit-box > em b strong{ font-weight: 800; color: #fff;}
#sub.about .section3{padding-top : 200px; box-sizing: border-box; position: relative;}
#sub.about .section3 .section-body{position: relative; z-index: 1;}
#sub.about .section3 .tit-area{position: relative; z-index: 9;} 
#sub.about .section3 .canvas-wrapper{transform: scale(1.5);}
/* #sub.about .section3 .canvas-wrapper canvas{top: -29%; left: 4%; position: absolute;} */
#sub.about .section3 .canvas-wrapper canvas{top: -365px; left: 180px; position: absolute;}
#sub.about .section3 .round{display: block; width: 51px; height: 51px; border-radius: 50%; background: #29D4C1; position: absolute; top: 45px; left: 40%;}
#sub.about .section3 .txt-wrap{width: fit-content; float: right; position: relative;}
#sub.about .section3 .txt-wrap > li:nth-child(1){margin-left: -72px;}
#sub.about .section3 .txt-wrap > li:nth-child(2){margin-left: 55px;}
#sub.about .section3 .txt-wrap > li > ul > li{color: #fff; border: 1px solid #B2B2B2; border-radius: 500px; box-sizing: border-box; padding: 35.5px 62px; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.72px; width: fit-content; line-height: 1; transition: 0.3s; cursor: default; max-height: 97px;}
#sub.about .section3 .txt-wrap > li > ul > li.con1{}
#sub.about .section3 .txt-wrap > li > ul > li.con2{}
#sub.about .section3 .txt-wrap > li > ul > li.con3{}
#sub.about .section3 .txt-wrap > li > ul > li.con4{}
#sub.about .section3 .txt-wrap > li > ul > li.con5{}
#sub.about .section3 .txt-wrap > li > ul > li.con6{}
#sub.about .section3.animate .txt-wrap > li > ul > li.con7{animation: slideAndRotateCon7 0.6s forwards; animation-delay: 1.5s;}
#sub.about .section3.animate .txt-wrap > li > ul > li.con8{animation: slideAndRotateCon8 0.6s forwards; animation-delay: 1.7s;}
#sub.about .section3 .txt-wrap > li > ul > li:hover{background: #29D4C1; border: 1px solid #29D4C1;}
.txt-wrap .txt-con, .txt-wrap .round {opacity: 0; transform: translateY(-20px);}
/* 媛� �붿냼�� �좊땲硫붿씠�� 吏��� �쒓컙 */
#sub.about .section3.animate .txt-wrap .con1 {animation: fadeInDown 0.2s forwards; animation-delay: 0.1s;}
#sub.about .section3.animate .txt-wrap .con2 {animation: fadeInDown 0.2s forwards; animation-delay: 0.3s;}
#sub.about .section3.animate .txt-wrap .con3 {animation: fadeInDown 0.2s forwards; animation-delay: 0.5s;}
#sub.about .section3.animate .txt-wrap .con4 {animation: fadeInDown 0.2s forwards; animation-delay: 0.7s;}
#sub.about .section3.animate .txt-wrap .con5 {animation: fadeInDown 0.2s forwards; animation-delay: 0.9s;}
#sub.about .section3.animate .txt-wrap .con6 {animation: fadeInDown 0.2s forwards; animation-delay: 1.1s;}
#sub.about .section3.animate .txt-wrap .round {animation: fadeInDown 0.2s forwards; animation-delay: 1.3s;}
/* con7怨� con8�� 誘몃걚�ъ��� �대젮�ㅻ뒗 �좊땲硫붿씠�� */
@keyframes slideAndRotateCon7 {
    0% {
        opacity: 0;
        transform: translateY(-50px) rotate(0deg); /* �뚯쟾 �놁쓬, �꾩そ�쇰줈 �대룞 */
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(24.98deg); /* 理쒖쥌 �꾩튂�� �뚯쟾 �곹깭 */
        margin-left: -46px;
        margin-top: -38px;
    }
}
@keyframes slideAndRotateCon8 {
    0% {
        opacity: 0;
        transform: translateY(-50px) rotate(0deg); /* �뚯쟾 �놁쓬, �꾩そ�쇰줈 �대룞 */
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(50.24deg); /* 理쒖쥌 �꾩튂�� �뚯쟾 �곹깭 */
        margin-left: -91px;
        margin-top: -51px;
    }
}
#sub.about .section4 .work_wrap{padding-top: 265px;}
#sub.about .section4 .section-body{max-width: unset; padding: 0;}
#sub.about .section4 .section-body .tit-area{max-width: 1480px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
#sub.about .section4 .workSwiper{padding-right: 92px;}
#sub.about .section4 .work_wrap .work_list{padding-left: 0;}
#sub.about .section4 .work_wrap .work_list li{padding: 70px 50px; box-sizing: border-box; border-radius: 15px; border: 1px solid #8B8B8B; max-width: 520px; width: 100%; transition: 0.3s;}
#sub.about .section4 .work_wrap .work_list li:hover{border: 1px solid #fff;}
#sub.about .section4 .work_wrap .work_list li:hover span{color: #fff;}
#sub.about .section4 .work_wrap .work_list li p{margin-top: 70px;}
#sub.about .section4 .work_wrap .work_list li p em{display: block; font-size: 1.8rem; font-weight: 500; line-height: 1; text-transform: capitalize;}
#sub.about .section4 .work_wrap .work_list li p b{display: block; font-size: 3.4rem; font-weight: 800; letter-spacing: -1.02px; text-transform: uppercase; color: #fff; line-height: 24px; margin-top: 20px;}
#sub.about .section4 .work_wrap .work_list li span{font-size: 1.8rem; font-weight: 700; color: #999; text-transform: uppercase; line-height: 36px; letter-spacing: -0.54px; word-break: break-all; display: block; margin-top: 40px; transition: 0.3s;}

#sub.about .section5{padding-bottom: 200px;}
#sub.about .section5 .organization_wrap{padding-top: 140px;}
#sub.about .section5 .organization_wrap .cont-wrap{margin-left: 61px;}
#sub.about .section6 .section-body .section-inner{padding: 200px 0; box-sizing: border-box;}
#sub.about .section6 .withus_list{display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 34px;}
#sub.about .section6 .withus_list li{background-color: #F6F6F6; border: 0.75px solid #E0E0E0; box-sizing: border-box; width: 100%; max-width: 150px; height: 100%;transition: 0.3s; padding: 0 10px; padding-bottom: 92.31%; position: relative;}
#sub.about .section6 .withus_list li img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 10px; box-sizing: border-box;}
#sub.about .section6 .withus_list li:hover{background: #fff; border: 1px solid #0C0C0D; box-shadow: 3.75px 3.75px 15px 0px rgba(0, 0, 0, 0.15);}
#sub.about .section6 .withus_list li img{mix-blend-mode: Luminosity; transition: transform 0.3s ease;}
#sub.about .section6 .withus_list li:hover img{mix-blend-mode: normal;}

/* ==================================================
	�ы듃�대━�� �섏씠吏�
================================================== */
/* .sub .portfolio .cont-area{position: relative;} */
.sub .portfolio .portfolio-list{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.sub .portfolio .portfolio-list a{display: block; position: relative; padding-bottom: 100%;}
.sub .portfolio .portfolio-list a:hover .hoverbtn{opacity: 1;}
.sub .portfolio .portfolio-list a .img{position: absolute; width: 100%; height: 100%;}
.sub .portfolio .portfolio-list .txt{position: absolute; bottom: 34px; left: 36px; font-family: 'NanumSquare', sans-serif;}
.sub .portfolio .portfolio-list .txt p{font-size: 2rem; font-weight: 800; line-height: 14px; letter-spacing: -0.6px; text-transform: capitalize; margin: 0; margin-top: 15px; color: #fff !important;}
.sub .portfolio .portfolio-list .txt span{font-size: 1.6rem; font-weight: 800; line-height: 11px; letter-spacing: -0.48px; text-transform: uppercase; color: #fff !important;}
.tab-area{padding: 0 20px !important; box-sizing: border-box; }
.tab-area li{box-sizing: border-box; border: 1px solid #0C0C0D; border-radius: 500px; transition: 0.3s; background: #fff; position: relative; width: fit-content; text-align: center; list-style: none;}
.tab-area li a{font-size: 1.6rem; font-weight: 800; letter-spacing: -0.48px; display: block; line-height: 55px; transform: skew(-0.03deg); color: #000; min-height: 55px;  padding: 0 20px; box-sizing: border-box; min-width: 80px;}


/*.tab-area li:nth-child(1) {max-width: 80px;}
.tab-area li:nth-child(2) {max-width: 97px;}
.tab-area li:nth-child(3) {max-width: 129px;}
.tab-area li:nth-child(4) {max-width: 163px;}
.tab-area li:nth-child(5) {max-width: 121px;}
.tab-area li:nth-child(6) {max-width: 132px;}
.tab-area li:nth-child(7) {max-width: 103px;}
.tab-area li:nth-child(8) {max-width: 83px;}
.tab-area li:nth-child(9) {max-width: 117px;} */
.tab-area li:hover{border: 1px solid #29D4C1;}
.tab-area li:hover a{color: #29D4C1;}
.tab-area li.on{background: linear-gradient(45deg, #3FBC9D 38.76%, #00B0AE 65.59%, #00AAC3 92.13%); color: #fff; border: 1px solid transparent;}
.tab-area li.on a{color: #fff;}


.sub .search-area {width: fit-content; margin: 0 auto; position: relative;}
.sub .search-area .search-wrap {position: relative; height: 76px; transition: width 0.3s ease; /* �덈퉬 蹂��� �좊땲硫붿씠�� */ width: 100px; /* 珥덇린 �덈퉬 100px */ max-width: 1000px;}
.sub .search-area .search-wrap input[type="text"] {outline: none; width: 100%; /* input�� 遺�紐� 而⑦뀒�대꼫�� 留욎땄 */ border: none; font-size: 2.0rem; font-weight: 800; color: #29D4C1; letter-spacing: -0.6px; text-align: center; font-family: 'NanumSquare', sans-serif; z-index: 9; background: transparent; padding: 0 40px 0 0;}
.sub .search-area .search-wrap::before {content: ''; clear: both; display: block; width: 25px; height: 76px; background-image: url(/img/portfolio_search_left.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: -30px;}
.sub .search-area .search-wrap::after {content: ''; clear: both; display: block; width: 25px; height: 76px; background-image: url(/img/portfolio_search_right.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; right: -30px;}
.sub .search-area .placeholder {position: absolute; font-family: 'NanumSquare', sans-serif;  font-size: 2.0rem;  font-weight: 800; letter-spacing: -0.6px; top: 50%; transform: translateY(-50%); opacity: 1; transition: opacity 0.3s ease; white-space: nowrap; width: 100%; text-align: center; line-height: 74px !important;}
.sub .search-area .search-wrap input:focus ~ .placeholder {opacity: 0;}
.sub .search-area .cursor{width: 3px; height: 40px; color: #29D4C1; display: inline-block;}
.sub .search-area .search-wrap .btn_search{width: 35px !important; height: 35px !important; background-color: #29D4C1; background-image: url(/img/ico_search_w.svg); background-repeat: no-repeat; background-position: center center; background-size: 15px 16px; text-indent: -999999px; display: block; opacity: 0; position: absolute; right: 0; border-radius: 50%; border: none;}
.sub .search-area .search-wrap .btn_search.on{opacity: 1; z-index: 9;}

/* 諛섏쓳�� 泥섎━ */
@media (max-width: 800px) {
    .sub .search-area .search-wrap {
        max-width: 90vw; /* �쒕툝由우뿉�쒕뒗 酉고룷�� �덈퉬�� 90% */
    }
}

@media (max-width: 600px) {
    .sub .search-area .search-wrap {
        max-width: 95vw; /* 紐⑤컮�쇱뿉�쒕뒗 酉고룷�� �덈퉬�� 95% */
    }
   
}

.background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    transition: transform 5s cubic-bezier(0.3, 0, 0.7, 1), opacity 1s;
    -webkit-transition: -webkit-transform 5s cubic-bezier(.3, 0, .7, 1), opacity 1s ease;
}

/* ==================================================
	�곴났�댁빞湲� �섏씠吏�
================================================== */
#sub.story .section{padding-bottom: 178px;}
#sub.story .section ul.list{border-top: 3px solid #000000; border-bottom: 3px solid #000000; width: 100%;}
#sub.story .section ul.list li a{padding: 70px 0; box-sizing: border-box; display: block; position: relative;border-bottom:1px solid #000000;  display: block;}
#sub.story .section ul.list li:last-child a{border-bottom: none}
#sub.story .section ul.list li a .title, #sub.story_view .section .title{font-size: 4.0rem; font-weight: 800; letter-spacing: -1.2px; line-height: 1.2; transition: 0.3s;}
#sub.story .section ul.list li a .title, #sub.story .section ul.list li a .sub_con{width: calc(100% - 80px);}
#sub.story .section ul.list li a .date{display: block; text-align: end; font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.45px; color: #8B8B8B; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
#sub.story .section ul.list li a .sub_con{color: #8B8B8B; font-size: 2.0rem; font-weight: 400; letter-spacing: -0.6px; transition: 0.3s; margin-top: 10px; line-height: 38px;}
#sub.story .section ul.list li .hover-img{width: 0; height: 0; border-radius: 50%; box-shadow: 15px 15px 15px 0px rgba(0, 0, 0, 0.05); overflow: hidden; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); opacity: 0; transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease; cursor: pointer;}
#sub.story .section ul.list li .hover-img img{object-fit: cover;}
#sub.story .section ul.list li:hover .hover-img{width: 378px; height: 378px; opacity: 1;}
#sub.story .section ul.list li:hover a .title{color: #29D4C1;}
#sub.story .section ul.list li:hover a .sub_con{color: #0C0C0D;}

#sub.story_view{padding-bottom: 243px;}
#sub.story_view .section .date{display: block; text-align: center; font-size: 1.5rem; font-weight: 700; color: #8B8B8B; letter-spacing: -0.45px; margin-top: 40px; margin-bottom: 0; line-height: 1;}
#sub.story_view .section .cont{padding: 80px 0; box-sizing: border-box; border-top: 3px solid #000; border-bottom: 3px solid #000; margin-top: 80px; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.54px; line-height: 36px;}
#sub.story_view .section .cont img{max-width:100% !important;}

/* ==================================================
	梨꾩슜�덈궡 �섏씠吏�
================================================== */
#sub.hiring .tit-area .tit-box h5{font-size: 2.4rem; font-weight: 700; letter-spacing: -0.72px; line-height: 1;}
#sub.hiring .section{padding-top: 200px;}
#sub.hiring .section1 {padding-top: 0 !important;}
#sub.hiring .section1 .section-body{max-width: 1760px;}
#sub.hiring .visual-wrap{padding: 77px 140px; box-sizing: border-box; border-radius: 30px; position: relative; overflow: hidden;}
#sub.hiring .visual-wrap .tit-area{width: calc(100% - 738px);}
#sub.hiring .tag-area{padding-bottom: 32.362%; max-width: 738px; max-height: 466px; width: 100%; height: 100%;}
#sub.hiring .tit-area, #sub.hiring .tag-area{position: relative; z-index: 1;}
#sub.hiring .tag-area li:nth-child(1){max-width: 270px; min-width: 270px; top: 20px; left: -20px;}
#sub.hiring .tag-area li:nth-child(1)::after{content: ''; clear: both; display: block; background: url(/img/hiring_emo.png) no-repeat center center; background-size: 100% 100%; position: absolute; top: -37px; left: -4px; width: 80px; height: 80px;}
#sub.hiring .tag-area li:nth-child(2){max-width: 296px; min-width: 296px; top: 103px; right: 111px; z-index: 1;text-indent: -35px;}
#sub.hiring .tag-area li:nth-child(2)::after{content: ''; clear: both; display: block; background: url(/img/hiring_star.svg) no-repeat center center; background-size: 100% 100%; position: absolute; width: 25px; height: 36px; top: 22px; right: 64px;}
#sub.hiring .tag-area li:nth-child(3){max-width: 276px; min-width: 276px; top: 158px; left: 135px;}
#sub.hiring .tag-area li:nth-child(4){max-width: 252px; min-width: 252px; bottom: 130px; right: 30px;}
#sub.hiring .tag-area li:nth-child(5){max-width: 251px; min-width: 251px; bottom: 116px; left: 35px;}
#sub.hiring .tag-area li:nth-child(6){max-width: 247px; min-width: 247px; bottom: 70px; right: 99px; z-index: 1;}
#sub.hiring .tag-area li:nth-child(7){max-width: 296px; min-width: 296px; bottom: 0; left: 85px;}
#sub.hiring .tag-area li:nth-child(7)::before{content: ''; clear: both; display: block; background: url(/img/hiring_eye.svg) no-repeat center center; background-size: 100% 100%; width: 68px; height: 73px; position: absolute; bottom: -8px; left: -34px;}
#sub.hiring .tag-area li:nth-child(7)::after{content: ''; clear: both; display: block; background: url(/img/hiring_w_star.svg) no-repeat center center; background-size: 100% 100%; width: 72px; height: 71px; position: absolute; top: -30px; right: 14px;}
/* section2 */
#sub.contact .section2 .tit-area .tit-box h4,
#sub.hiring .tit-area .tit-box h4,
#sub.business .tit-area .tit-box h4{text-align: start; font-weight: 400; text-transform: capitalize;}
#sub.hiring .process {position: relative; height: 447px; transition: height 1s ease; width: 100%;}
#sub.hiring .process::after {content: ''; clear: both; display: block; width: calc(100% - 116px); height: 1px; background: #000; position: absolute; top: 38%; left: 55.5px;}
#sub.hiring .process li {position: absolute; left: 0; transition: all 1s ease; opacity: 1; max-width: 320px; width: 100%;}
#sub.hiring .process.loaded li {opacity: 1; transform: translateX(0);}
#sub.hiring .process.loaded li:nth-child(1) {left: 0;}
#sub.hiring .process.loaded li:nth-child(2) {left: 22%;}
#sub.hiring .process.loaded li:nth-child(3) {left: 41%;}
#sub.hiring .process.loaded li:nth-child(4) {left: 60%;}
#sub.hiring .process.loaded li:nth-child(5) {left: 79%;}
#sub.hiring .process.loaded li + li{margin-left: -40px;}
#sub.hiring .process li .circle{padding: 136px 177px 116px 55px; box-sizing: border-box; border: 1px solid #8B8B8B; border-radius: 50%; max-width: 320px; max-height: 320px; width: 100%; height: 100%; transition: all 0.5s ease-in-out;}
#sub.hiring .process li .circle.on, #sub.hiring .process li .circle:hover{background: #0C0C0D; border: 1px solid #0C0C0D;}
#sub.hiring .process li .circle span{font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.45px; text-transform: uppercase; display: block; position: relative; opacity: 0; transition: all 0.5s ease-in-out;}
#sub.hiring .process li .circle b{font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.72px; display: block; white-space: nowrap; position: relative; opacity: 0; transition: all 0.5s ease-in-out;}
#sub.hiring .process li .circle.on b, #sub.hiring .process li .circle:hover b{color: #fff;}
#sub.hiring .process li .txt{font-size: 1.5rem; font-weight: 700; line-height: 27px; letter-spacing: -0.45px; margin-left: 55px; position: relative; opacity: 0; transition: all 0.5s ease-in-out;}
#sub.hiring .process.loaded li .txt, #sub.hiring .process.loaded li .circle span, #sub.hiring .process.loaded li .circle b{opacity: 1;}
#sub.hiring .process li:last-child .circle.on{border: 1px solid #2E2E2F; background: none;}
#sub.hiring .process li .circle.active::after{content: ''; clear: both; display: block; width: 100%; height: 100%;   background: #0C0C0D; position: absolute; top: 0; left: 0; max-height: 320px; overflow: hidden; z-index: -1; border-radius: 500px 0 0 500px;}
#sub.hiring .process li:last-child .circle.on span{color: #0C0C0D !important;}
/* #sub.hiring .process li:last-child .circle.on:hover{background: transparent; border: 1px solid #0C0C0D;} */
#sub.hiring .process li:last-child .circle.on::after{content: ''; clear: both; display: block; max-width: 320px; max-height: 320px; border-radius: 50%; width: 100%; height: 100%; border: 1px solid #2E2E2F; position: absolute; top: 20px; left: 20px;}
#sub.hiring .process li:last-child .circle.on::before{content: ''; clear: both; display: block; max-width: 320px; max-height: 320px; border-radius: 50%; width: 100%; height: 100%;  background: var(--gr-pointer, linear-gradient(45deg, #3FBC9D 38.76%, #00B0AE 65.59%, #00AAC3 92.13%)); position: absolute; top: 10px; left: 10px; z-index: -1;}
/* section3 */
.centerflipcards{width: calc(100% + 30px); margin-left: -30px;}
.square-flip{-webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -webkit-transform: perspective(1000px); -moz-transform: perspective(1000px); -ms-transform: perspective(1000px); transform: perspective(1000px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;  -ms-transform-style: preserve-3d;  transform-style: preserve-3d; position:relative; float:left; width: calc(25% - 30px); height: 100%; min-height: 432px; border-right: 1px solid #E4E4E4; box-sizing: border-box; margin-left: 30px;}
.square-flip:last-child{border-right: none;}
.square, .square2{width:100%; height:100%;}
.square{background-size: cover; background-position:center center; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); overflow: hidden; position:absolute; top:0; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.square-flip .square{-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); transform-style: preserve-3d; z-index:1;}
.square-flip:hover .square{-webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); transform-style: preserve-3d;}
.square2{background-size: cover; background-position:center center; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); overflow: hidden; position:absolute; top:0; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.square-flip .square2{-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); transform-style: preserve-3d; z-index:1; }
.square-flip:hover .square2{-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); transform-style: preserve-3d;}
.square-container{padding: 0; text-align:center; position:relative; top:50%; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transform: translateY(-50%) translateX(0px) scale(1);  -ms-transform: translateY(-50%) translateX(0px)  scale(1); transform: translateY(-50%) translateX(0px)  scale(1); transform-style: preserve-3d;z-index:2;}
.square-flip:hover .square-container{ -webkit-transform: translateY(-50%) translateX(-650px)  scale(.88); -ms-transform: translateY(-50%) translateX(-650px)  scale(.88); transform: translateY(-50%) translateX(-650px)  scale(.88); transform-style: preserve-3d;}
.square-container2{position:relative; top:50%; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88); -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88); transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88); transform-style: preserve-3d; z-index:2;}
.square-flip:hover .square-container2{-webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1); -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1); transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1); transform-style: preserve-3d;}
/* .flip-overlay{display:block; background:#fff; width:100%; height:100%; position:absolute; top:0;} */
.square-flip .txt-wrap em{font-size: 1.6rem; font-weight: 500; line-height: 1; display: block; text-transform: capitalize; text-align: start;}
.square-flip .txt-wrap b{font-size: 3.0rem; font-weight: 800; letter-spacing: -0.9px; display: block; text-align: start; line-height: 1; margin-top: 11px;}
.square-flip .txt-wrap p{font-size: 1.5rem; font-weight: 700; letter-spacing: -0.45px; line-height: 30px; padding-right: 30px;}
.square-flip .img-wrap{margin-top: 175px; text-align: end; margin-right: 30px;}
/* section4 */
#sub.hiring .section4{padding-top: 0;}
#sub.hiring .section4 .section-row{position: relative;}
#sub.hiring .section4 .section-column.poa{position: absolute; top: 200px;}
#sub.hiring .agency{border-left: 1px solid #474747; border-right: 1px solid #474747; box-sizing: border-box;}
#sub.hiring .agency li{width: 33.333%; padding: 457px 0 257px; max-height: 944px; height: 100%; box-sizing: border-box; transition: 0.3s; overflow: hidden; position: relative;}
#sub.hiring .agency li::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: -1;}
#sub.hiring .agency li:nth-child(1)::before {background-image: url('/img/agency_bg_1.png');}
#sub.hiring .agency li:nth-child(2)::before {background-image: url('/img/agency_bg_2.png');}
#sub.hiring .agency li:nth-child(3)::before {background-image: url('/img/agency_bg_3.png');}
#sub.hiring .agency li:hover::before {opacity: 1; z-index: 0;}
#sub.hiring .agency li + li{border-left: 1px solid #474747;}
#sub.hiring .agency li h4{font-size: 3.0rem; font-weight: 900; letter-spacing: -0.9px; color: #8B8B8B; line-height: 39px; position: relative; z-index: 1; word-break: keep-all; word-wrap: break-word;}
#sub.hiring .agency li h4 b{font-weight: 900;}
#sub.hiring .agency li span{font-size: 2.0rem; font-weight: 600; letter-spacing: -0.6px; line-height: 34px; color: #fff; margin-top: 67px; display: block; position: relative; z-index: 1; word-break: keep-all; word-wrap: break-word;}
/* section5 */
#sub.hiring .section5{padding-bottom: 149px;}
#sub.hiring .section5 .section-body{max-width: 1580px;}
#sub.hiring .benefits{width: calc(100% + 24px); margin-left: -24px;}
#sub.hiring .benefits li{width: calc(20% - 24px); margin-left: 24px; float: left; padding: 65px 0 58px; box-sizing: border-box;}
#sub.hiring .benefits li:nth-child(13){padding: 40px 0 33px;}
#sub.hiring .benefits li:nth-child(20){padding: 67.5px 0;}
#sub.hiring .benefits li .img{text-align: center;}
#sub.hiring .benefits li .txt{margin-top: 10px;}
#sub.hiring .benefits li .txt p{font-size: 1.6rem; font-weight: 700; letter-spacing: -0.48px; color: #8B8B8B; line-height: 1; text-align: center; line-height:20px; word-break: break-all;}
#sub.hiring .benefits li .txt p b{display: block; font-size: 2.2rem; font-weight: 800; color: #0C0C0D; line-height: 1; letter-spacing: -0.66px; margin-bottom: 15px; line-height:26px;}
#sub.hiring .benefits li .txt p span{display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.45px; color: #797979;  line-height: 1; margin-top: 8px;;}

/* ==================================================
	�곷떞�섎ː �섏씠吏�
================================================== */
#sub.contact .section2 .tit-area .tit-box h4, #sub.hiring .tit-area .tit-box h4, #sub.business .tit-area .tit-box h4 {text-align: start; font-weight: 400; text-transform: capitalize; word-break: keep-all; word-wrap: break-word;}
#sub.contact .section1 .section-body{max-width: 1760px; margin: 0 auto;}
#sub.contact .visual-wrap{background: #0A0A0A; padding: 83px 140px; box-sizing: border-box; border-radius: 30px; position: relative; overflow: hidden;}
/* #sub.contact .visual-wrap::after{content: ''; clear: both; display: block; width: 100%; height: 100%; background: url(/img/contact_viaual_bg.png) no-repeat center center; background-size: 100% 100%; position: absolute; top: 0; right: -145px; z-index: 0;} */
#sub.contact .tit-area, #sub.contact .tag-area{position: relative; z-index: 1;}
#sub.contact .visual-wrap .tit-area{width: calc(100% - 728px);}
#sub.contact .tag-area{padding-bottom: 31.528%; max-width: 728px; max-height: 454px; width: 100%; height: 100%;}
.tag-area li{font-size: 2.2rem; font-weight: 800; border: 1.5px solid #fff; background: #0C0C0D;  box-sizing: border-box; border-radius: 500px; box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.10); backdrop-filter: blur(10px); line-height: 1; color: #fff; letter-spacing: -0.66px; min-height: 95px; position: absolute;}
.tag-area li.mini{font-size: 1.8rem; font-weight: 800; letter-spacing: -0.54px; min-height: 73px;}
.tag-area li.bw{background: #fff; color: #0C0C0D; border: 1.5px solid #0C0C0D;}
#sub.contact .tag-area li:nth-child(1){max-width: 211px; min-width: 211px; top: 0; z-index: 1;}
#sub.contact .tag-area li:nth-child(2){max-width: 286px; min-width: 286px; top: 54px; left: 55px;}
#sub.contact .tag-area li:nth-child(2)::after{content: ''; clear: both; display: block; background: url(/img/mw_ico.svg) no-repeat center center; background-size: 100% 100%; width: 56px; height: 46px; position: absolute; top: -16px; right: 0;}
#sub.contact .tag-area li:nth-child(3){max-width: 240px; min-width: 240px; top: 61px; right: 125px;}
#sub.contact .tag-area li:nth-child(4){max-width: 175px; min-width: 175px; top: 185px; left: 211px; z-index: 1;}
#sub.contact .tag-area li:nth-child(5){max-width: 297px; min-width: 297px; top: 200px; right: 0; min-height: 89px;}
#sub.contact .tag-area li:nth-child(6){max-width: 256px; min-width: 256px; top: 225px;}
#sub.contact .tag-area li:nth-child(7){max-width: 245px; min-width: 245px; bottom: 66px; right: 94px; z-index: 1;}
#sub.contact .tag-area li:nth-child(8){max-width: 299px; min-width: 299px; bottom: 0; left: 145px;}
#sub.contact .tag-area li:nth-child(8)::before{content: ''; clear: both; display: block; background: url(/img/money_ico_l.svg) no-repeat center center; background-size: 100% 100%; width: 27px; height: 24px; position: absolute; top: 23%; left: -32px;}
#sub.contact .tag-area li:nth-child(8)::after{content: ''; clear: both; display: block; background: url(/img/money_ico_r.svg) no-repeat center center; background-size: 100% 100%; width: 41px; height: 41px; position: absolute; bottom: 11px; left: -15px;}
#sub.contact .section2 {padding: 200px 0; box-sizing: border-box;}
.conArea form {height: 100%;}
.conArea table{width: 100%;}
.conArea table tr td {position: relative; padding-top: 40px; box-sizing: border-box;}
.conArea table tr td:nth-child(odd) {padding-right: 3.3%;}
.conArea table tr td:nth-child(even) {padding-left: 3.3%;}
.conArea table tr td:nth-child(even) em {left: 6.3%;}
.conArea table tr td.colspan {padding-right: 0;}
.conArea .est {position: absolute; top: 62%; left: auto; display: block; width: 9px; height: 9px; border-radius: 9px; background-color: #0cd3cc;}
.conArea em {position: absolute; top: 44px; left: 0; display: flex; gap: 5px;line-height: 1; font-size: 1.8rem; color: transparent; letter-spacing: -0.54px; z-index: -1; transition: all .3s; font-family:'NanumSquareNeo', sans-serif;}
.conArea em b{color: #F00000; font-size: 1.6rem; font-weight: 600; margin-left: -4px;}
.conArea input[type="text"]:focus, .conArea textarea:focus {outline:none; border-bottom: 2px solid #29D4C1; padding: 0;}
.conArea input[type="text"], .conArea textarea {position: relative; display: block; padding: 0 0 12px; line-height: 1.2; font-size: 1.8rem; font-weight: 700; color: #0C0C0D; border: 0; background-color: transparent; border-bottom: 1px solid #999; transition: height .3s; box-sizing: border-box; letter-spacing: -0.54px; font-family: 'NanumSquareNeo', sans-serif; width: 100%;}
.conArea input[type="text"]{height: 48px; line-height: 48px;}
.conArea input[type="text"]::placeholder, .conArea textarea::placeholder {font-size: 1.8rem; color: #8B8B8B; font-weight: 800; letter-spacing: -0.54px; font-family: 'NanumSquareNeo', sans-serif;} 
.conArea input[type="text"]:focus + em, .conArea textarea:focus + em {top: 18px; font-size: 1.4rem; color: #29D4C1; letter-spacing: -0.42px; font-weight: 800; font-family:'NanumSquare', sans-serif;}
.conArea input[type="text"]:focus::placeholder, .conArea textarea:focus::placeholder {color: transparent;}
.conArea input[type="text"]:not(:placeholder-shown) + em, .conArea textarea:not(:placeholder-shown) + em {top: 18px; font-size: 1.5rem; color: #29D4C1; font-weight: 800;}
.conArea textarea {width: 100%; resize: none; height: 40px;}
.conArea textarea:focus {height: 250px; outline: none; overflow-y: auto;}
.conArea textarea:not(:placeholder-shown) {height: 250px;} 
.conArea .checkSt {margin-top: 15px;}
.conArea .checkSt a {position: relative; display: inline-block; margin-left: 10px; line-height: 1; font-size: 1.8rem; vertical-align: middle;}
.conArea .checkSt a:before {content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background-color: #000;}
.contact .filebox{position: absolute; z-index: -11; opacity: 0; transition: opacity 0.3s, z-index 0.3s; width: 100%;}
.contact .filebox.focus {opacity: 1; z-index: 99;}
.contact .filebox span{background: #999999; border-radius: 5px; padding: 10px; box-sizing: border-box; font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: -0.36px; line-height: 1; position: absolute; cursor: pointer; text-transform: uppercase; z-index: 99; bottom: -40px;}
.contact .filebox .upload-name {display: block; padding: 0 60px 0 101px; box-sizing: border-box; vertical-align: middle; background: transparent; width: 100%; border-bottom: none;}
.contact #uploadName.focus{padding: 0 60px 0 101px; box-sizing: border-box;}
.contact .filebox label { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 10px 20px; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; display: none; }
.contact .filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; }
.contact .check-box > input[type="checkbox"] ~ label{font-size: 1.6rem; font-weight: 700; padding-left: 40px; margin-bottom: 0; line-height: 30px; letter-spacing: -0.48px; font-family:'NanumSquareNeo', sans-serif;}
.contact .check-box > input[type="checkbox"] ~ label:before{width: 30px; height: 30px; border-radius: 3px; border: 1px solid #8B8B8B; background-image: url('/img/ico_check_lm.svg'); background-repeat: no-repeat; background-size: 15.93px 13px; background-position: center 48%; margin-top: -15px;}
.contact .check-box > input[type="checkbox"]:checked ~ label:before {background-image: url(/img/ico_chk_w.svg); background-color: #29D4C1; border: 1px solid #29D4C1;}
.contact .check-box a {font-size: 1.2rem; font-weight: 800; color: #7D7D8A; border-radius: 5px; background-color: #E1E1E1; padding: 5px; box-sizing: border-box; line-height: 1; letter-spacing: -0.36px; margin-left: 10px;  font-family:'NanumSquareNeo', sans-serif;}
.contact .btnSet a.main_btn{padding: 30px 90px 30px 80px;}
.contact .btnSet a.main_btn:hover{padding: 30px 100px 30px 80px;}
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right{display: none;}

.tel-box{font-size: 6.0rem; font-weight: 700; line-height: 1; letter-spacing: -3px; color: #29D4C1; position: relative; padding-left:78px;}
.tel-box a{color: #29D4C1; text-decoration: none;}
.tel-box:before{content: ''; clear: both; display: block; background: url(/img/contact_tel.svg) no-repeat center center; background-size: 100% 100%; width: 70px; height: 70px; position: absolute; top: -20px; left:0;}

/* ==================================================
	�ъ뾽遺꾩빞 �섏씠吏�
================================================== */
/* 怨듯넻 */
#sub.business .tab-area{padding: 0 !important;}
#sub.business .tit-area{position: relative;}
#sub.business .canvas_wrap{position: absolute; top: 0; left: 0; border-radius: 30px; overflow: hidden; width: 100%; height: 100%;}
#sub.business .tit-area .tit-box h3{color: #fff;}
#sub.business .cont-list{width: calc(100% + 24px); margin-left: -24px; margin-top: -14px;}
#sub.business .cont-list .img-hover-wrap{width: calc(33.333% - 24px); border-radius: 15px; box-sizing: border-box; margin-left: 24px; margin-top: 24px; float: left; overflow: hidden; transition: 0.3s;}
#sub.business .section1 .section-body{max-width: 1760px;}
/* section2 */
#sub.business .section2{padding-bottom: 71px;}
#sub.business .section2 .section-row{position: relative;}
#sub.business .section2 .section-row .section-column + .section-column{margin-top: -200px;}
#sub.business .section2 .cont-wrap{overflow-x: auto; overflow-y: hidden;}
#sub.business .big-circle-wrap{position: relative; top: 0; min-width: 980px;}
#sub.business .big-circle-wrap .big-circle{position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 557px; height: 557px; border-radius: 50%; border: 1px dashed #BDBDBD;}
#sub.business .big-circle-wrap .big-circle:nth-child(2){width: 814px; height: 814px;}
#sub.business .big-circle-wrap .big-circle:nth-child(3){width: 1072px; height: 1072px;}
#sub.business .big-circle-wrap .big_wrap{position: absolute; width: 100%; height: 100%;}
#sub.business .work-wrap {position: relative; height: 100%;}
#sub.business .work-wrap::after {content: ''; clear: both; display: block; width: calc(100% - 105px); height: 1px; background: #8B8B8B; position: absolute; top: 50%; left: 55.5px; transform: translateY(-50%); z-index: 9;}
#sub.business .work-wrap li {position: relative; width: 100%; max-width: 300px; word-break: keep-all; word-wrap: break-word;}
#sub.business .work-wrap .detail-con li { padding-left:19px;}
#sub.business .work-wrap .detail-con li::before {content:'쨌'; position:absolute; display:block; top:0; left:0; clear: both;}
#sub.business .work-wrap > li + li{margin-left: -43px;}
#sub.business .work-wrap > li:last-child{margin-left: auto;}
#sub.business .work-wrap li .circle{padding: 104px 55px 84px 55px; box-sizing: border-box; border: 1px solid #8B8B8B; border-radius: 50%; max-width: 300px; max-height: 300px; width: 100%; height: 100%;  transition: all 0.5s ease-in-out; position: relative; aspect-ratio: 1/1;}
#sub.business .work-wrap li:last-child .circle{border: 1px solid transparent; padding: 111px 31px 91px 55px; transition: 0.3s;} 
#sub.business .work-wrap li .circle:hover, #sub.business .work-wrap li .circle.on{background: #0C0C0D; border: 1px solid #0C0C0D;}
#sub.business .work-wrap li:last-child .circle.on{background: linear-gradient(45deg, #3FBC9D 38.76%, #00B0AE 65.59%, #00AAC3 92.13%); border: 1px solid transparent;}
#sub.business .work-wrap li .circle span{font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.45px; text-transform: uppercase; display: block; transition: all 0.5s ease-in-out;}
#sub.business .work-wrap li .circle:hover span, #sub.business .work-wrap li .circle.on span{color: #fff;}
#sub.business .work-wrap > li:last-child .circle.on span, #sub.business .work-wrap li:last-child .circle.on h5{color: #0C0C0D !important;}
#sub.business .work-wrap li .circle h5{font-size: 2.0rem; font-weight: 800; line-height: 1.2;}
#sub.business .work-wrap li:last-child .circle.on h5 b{color: #ffffff !important;}
#sub.business .work-wrap li .circle h5 b{font-size: 2.8rem; font-weight: 800; letter-spacing: -0.84px; text-transform: capitalize; display: block; margin-bottom: 10px; cursor: default;}
#sub.business .work-wrap li .circle:hover h5, #sub.business .work-wrap li .circle.on h5{color: #fff;}
#sub.business .work-wrap li .circle .detail-con{position: absolute; top: calc(100% + 41px); z-index: -999; opacity: 0; transition: all 0.5s ease-in-out;}
#sub.business .work-wrap li .circle.on .detail-con, #sub.business .work-wrap li .circle:hover .detail-con{z-index: 9; opacity: 1;}
#sub.business .work-wrap li .circle .detail-con li{font-size: 1.5rem; font-weight: 700; letter-spacing: -0.45px; line-height: 30px;}

/* section3 */
#sub.business .visual-wrap.bg_b{background-color: #0C0C0D; background-position: center right; background-repeat: no-repeat;  background-size: cover; color: #fff; border-radius: 30px; padding: 240px 140px; box-sizing: border-box; max-height: 896px; position: relative;}
#sub.business .visual-wrap.bg_b h5{font-size: 2.0rem; font-weight: 400; line-height: 40px; letter-spacing: -0.6px; color: #999; margin-top: 95px;}
#sub.business .visual-wrap.bg_b h5 b{font-weight: 400; color: #fff;}
/* #sub.business .visual-wrap.bg_b .canvas_wrap{position: absolute; top: 0; left: 0; z-index: -1; border-radius: 30px; overflow: hidden;} */
#sub.business .section{padding-top: 200px;}
#sub.business .section3{padding-bottom: 200px; padding-top: 0;}
#sub.business .centerflipcards{width: calc(100% + 22px); margin-left: -22px;}
#sub.business .square-flip{margin-left: 22px; min-height: 500px; border-right: none; width: calc(25% - 22px);}
#sub.business .square-flip .square-container{background: #0C0C0D; height: 100%;}
#sub.business .square-flip .txt-wrap em, #sub.business .square-flip .txt-wrap b{text-align: center;}
#sub.business .square-flip .txt-wrap b{color: #fff;}
#sub.business .square-flip .img-wrap{margin: 0 auto; text-align: center;}
#sub.business .square-container2{height: 100%; padding: 0 40px; box-sizing: border-box;}
#sub.business.index .row{width: 100%;}
#sub.business.index .section-portfolio-grid__col-grid .row {margin-left:-10px;}
#sub.business.index .square-flip:nth-child(1) .square-container2{background: url(/img/business_section3_1_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.index .square-flip:nth-child(2) .square-container2{background: url(/img/business_section3_2_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.index .square-flip:nth-child(3) .square-container2{background: url(/img/business_section3_3_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.index .square-flip:nth-child(4) .square-container2{background: url(/img/business_section3_4_bg.png) no-repeat center center; background-size: 100% 100%;}
/* #sub.business .square-container2{opacity: 0.6; background: linear-gradient(45deg, #3FBC9D 38.76%, #00B0AE 65.59%, #00AAC3 92.13%); height: 100%; padding: 0 40px; box-sizing: border-box;} */
#sub.business .square, #sub.business .square2{border-radius: 15px; overflow: hidden;}
#sub.business .square-flip .square2 .txt-wrap b{font-size: 2.0rem; letter-spacing: -0.6px;}
#sub.business .square-flip .square2 .txt-wrap p{color: #fff; text-align: center; padding-right: 0; letter-spacing: -0.48px; word-break: keep-all;}
#sub.business .square-flip .square2 .txt-wrap p span{color: #0C0C0D !important; display: block; margin-bottom: 7px; font-weight: 900;}
#sub.business .section4 {padding-top: 0; position: relative; overflow: hidden; width: 100%;}
#sub.business .svg-img{position: absolute; top: 50px; right: -14.1%; width: 100%; height: 100%;}
.mosvg_wrap{display: none;}
/* 媛��� �붿냼 �앹꽦 */
/* #animatedCircle {transform-origin: center; animation: moveAlongPath 8s linear infinite;}
#animatedCircle1 {transform-origin: center; animation: moveAlongPath 8s linear infinite;}
@keyframes moveAlongPath {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translateAlongPath(animationPath);
    }
} */

#sub.business .section4 .section-row {position: relative;}
#sub.business .section4 .section-column.poa{position: absolute; top: 200px;}
#sub.business .section4 .tit-area {position: relative; z-index: 2;}
#sub.business .tips-wrap{border-left: 1px solid #474747; border-right: 1px solid #474747; box-sizing: border-box;}
#sub.business .tips-wrap li{width: 33.333%; padding: 457px 0 200px; max-height: 943px; height: 100%; box-sizing: border-box; transition: 0.3s; overflow: hidden; position: relative; z-index: 1;}
#sub.business .tips-wrap li + li {border-left: 1px solid #474747;}
#sub.business .tips-wrap li h4{font-size: 3.0rem; font-weight: 900; letter-spacing: -0.9px; color: #5D7976; line-height: 39px;}
#sub.business .tips-wrap li h4 b{font-weight: 900; color: #29D4C1;}
#sub.business .tips-wrap li span{color: #fff; font-size: 2.0rem; font-weight: 600; letter-spacing: -0.6px; line-height: 1; display: block; margin-top: 64px;}
#sub.business .tips-wrap li p{color: #fff; font-size: 3.0rem; font-weight: 400; letter-spacing: -0.9px; line-height: 30px; margin-top: 30px;}
#sub.business .tips-wrap li p strong{font-size: 10.0rem; font-weight: 800; line-height: 71px; letter-spacing: -3px; margin-right: 10px; }
#sub.business .tips-wrap li p img{margin-left: 5px; margin-bottom: 4px;}
#sub.business .section5{padding-bottom: 128px;}
#sub.business.shopping_mall .visual-wrap.bg_b{padding: 198px 140px;}
#sub.business.shopping_mall .square-flip:nth-child(1) .square-container2{background: url(/img/business_shopping_mall_section3_1_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.shopping_mall .square-flip:nth-child(2) .square-container2{background: url(/img/business_shopping_mall_section3_2_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.shopping_mall .square-flip:nth-child(3) .square-container2{background: url(/img/business_shopping_mall_section3_3_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.shopping_mall .square-flip:nth-child(4) .square-container2{background: url(/img/business_shopping_mall_section3_4_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.solution .visual-wrap.bg_b{padding: 220px 140px;}
#sub.business.solution .square-flip:nth-child(1) .square-container2{background: url(/img/business_solution_section3_1_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.solution .square-flip:nth-child(2) .square-container2{background: url(/img/business_solution_section3_2_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.solution .square-flip:nth-child(3) .square-container2{background: url(/img/business_solution_section3_3_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.solution .square-flip:nth-child(4) .square-container2{background: url(/img/business_solution_section3_4_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.mobile .visual-wrap.bg_b{padding: 198px 140px;}
#sub.business.mobile .square-flip:nth-child(1) .square-container2{background: url(/img/business_mobile_section3_1_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.mobile .square-flip:nth-child(2) .square-container2{background: url(/img/business_mobile_section3_2_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.mobile .square-flip:nth-child(3) .square-container2{background: url(/img/business_mobile_section3_3_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.mobile .square-flip:nth-child(4) .square-container2{background: url(/img/business_mobile_section3_4_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.landing .visual-wrap.bg_b{padding: 198px 140px;}
#sub.business.landing .square-flip:nth-child(1) .square-container2{background: url(/img/business_landing_section3_1_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.landing .square-flip:nth-child(2) .square-container2{background: url(/img/business_landing_section3_2_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.landing .square-flip:nth-child(3) .square-container2{background: url(/img/business_landing_section3_3_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.landing .square-flip:nth-child(4) .square-container2{background: url(/img/business_landing_section3_4_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.design .section3{padding-bottom: 0;}
#sub.business.design .visual-wrap.bg_b{padding: 240px 140px;}
#sub.business.design .square-flip,
#sub.business.marketing .square-flip,
#sub.business.maintenance .square-flip,
#sub.business.ai .square-flip{width: calc(33.333% - 22px);}
#sub.business.design .square-flip:nth-child(1) .square-container2{background: url(/img/business_design_section3_1_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.design .square-flip:nth-child(2) .square-container2{background: url(/img/business_design_section3_2_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.design .square-flip:nth-child(3) .square-container2{background: url(/img/business_design_section3_3_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.marketing .visual-wrap.bg_b{padding: 241.02px 140px;}
#sub.business.marketing .square-flip:nth-child(1) .square-container2{background: url(/img/business_marketing_section3_1_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.marketing .square-flip:nth-child(2) .square-container2{background: url(/img/business_marketing_section3_2_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.marketing .square-flip:nth-child(3) .square-container2{background: url(/img/business_marketing_section3_3_bg.png) no-repeat center center; background-size: 100% 100%;}
#sub.business.ai .square-flip:nth-child(1) .square-container2{background: url(/img/business_ai_section3_1_bg.jpg) no-repeat center center; background-size: 100% 100%;}
#sub.business.ai .square-flip:nth-child(2) .square-container2{background: url(/img/business_ai_section3_2_bg.jpg) no-repeat center center; background-size: 100% 100%;}
#sub.business.ai .square-flip:nth-child(3) .square-container2{background: url(/img/business_ai_section3_3_bg.jpg) no-repeat center center; background-size: 100% 100%;}
#sub.business.maintenance .section3,
#sub.business.maintenance .section4{padding-top: 200px;}
#sub.business.maintenance .section4 .section-inner{padding: 0 !important;}
#sub.business.maintenance .visual-wrap.bg_b{padding: 198.03px 140px;}
#sub.business.maintenance .work-wrap li .circle {padding: 102px 40px 82px 55px;}
#sub.business.maintenance .work-wrap li:last-child .circle {padding: 111px 31px 91px 53px;}
#sub.business.maintenance .work-wrap li .circle h5 b{font-size: 2.4rem; letter-spacing: -0.72px;}
#sub.business.maintenance .work-wrap > li:last-child .circle h5 b{font-size: 2.2rem; letter-spacing: -0.66px;}
#sub.business.maintenance .square-flip .txt-wrap b > em{font-size: 2.4rem; font-weight: 800; letter-spacing: -0.72px; color: #999; text-align: center; display: block; margin-top: 7px;}
#sub.business.maintenance .square-flip:nth-child(1) .square-container2{background: url(/img/business_maintenance_section3_1_bg.png) no-repeat center center !important; background-size: 100% 100% !important;}
#sub.business.maintenance .square-flip:nth-child(2) .square-container2{background: url(/img/business_maintenance_section3_2_bg.png) no-repeat center center !important; background-size: 100% 100% !important;}
#sub.business.maintenance .square-flip:nth-child(3) .square-container2{background: url(/img/business_maintenance_section3_3_bg.png) no-repeat center center !important; background-size: 100% 100% !important;}
/* #sub.business.maintenance .flip-overlay{background: #000;} */
#sub.business.maintenance .square-flip:nth-child(2) .square2 .txt-wrap p{line-height: 22.4px;}
#sub.business.maintenance .square-flip:nth-child(3) .square2 .txt-wrap p{line-height: 1;}
#sub.business.maintenance .square-flip .square2 .txt-wrap p b{font-size: 1.6rem; font-weight: 800; letter-spacing: -0.48px; text-transform: uppercase; line-height: 1; margin-bottom: 5px; display: block;}
#sub.business.maintenance .tbl-wrap{padding-right: 0;}
#sub.business.maintenance .detail-table{border-radius: 10px; border-style: hidden; box-shadow: 0 0 0 1px #000; overflow: hidden; min-width: 768px;}
/* #sub.business.maintenance .detail-table::after{content: ''; clear: both; display: block; width: 100%; height: 100%; border: 1px solid #000000;} */
#sub.business.maintenance .detail-table thead{border-radius: 10px 10px 0 0;}
#sub.business.maintenance .detail-table thead tr{}
#sub.business.maintenance .detail-table thead tr th{background: #2E2E2F; color: #fff; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.48px; padding: 20px 10px; border-top: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000000; box-sizing: border-box; font-family: 'NanumSquare'; /*transform: skew(-0.03deg);*/ position: relative;}
#sub.business.maintenance .detail-table thead tr th:first-child{border-radius: 10px 0 0 0; border-left: none;}
#sub.business.maintenance .detail-table thead tr th:last-child{border-radius: 0 10px 0 0;}
/* #sub.business.maintenance .detail-table thead tr th::before{content: ''; clear: both; display: block; width: 1px; height: 100%; background: #000; position: absolute; top: 0; left: 0;} */
#sub.business.maintenance .detail-table tbody{}
#sub.business.maintenance .detail-table tbody tr{}
#sub.business.maintenance .detail-table tbody tr td{background: #fff; border-top: 1px solid #000; border-left: 1px solid #000; /*border-bottom: 1px solid #000;*/ box-sizing: border-box; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.45px; color: #2E2E2F; text-align: center; padding: 20px; box-sizing: border-box; font-family: 'NanumSquare'; transform: skew(-0.03deg); position: relative; word-break: keep-all;}
#sub.business.maintenance .detail-table tbody tr td:first-child{border-left: none;}
#sub.business.maintenance .detail-table tbody tr:last-child td:first-child{border-radius: 0 0 0 10px;}
#sub.business.maintenance .detail-table tbody tr:last-child td:last-child{border-radius: 0 0 10px 0;}
#sub.business.maintenance .detail-table tbody tr:nth-child(1) td:nth-child(5){padding: 20px 11px; line-height: 22.5px;}
#sub.business.maintenance .detail-table tbody tr:nth-child(1) td:nth-child(5) em{line-height: 19.6px; margin-top: 18px;}
/* #sub.business.maintenance .detail-table tbody tr td::before{content: ''; clear: both; display: block; width: 1px; height: 100%; background: #000; position: absolute; top: 0; left: 0;} */
#sub.business.maintenance .detail-table tbody tr td:nth-child(1)::before{display: none;}
#sub.business.maintenance .detail-table tbody tr.highlight td{background: #EEF6F8;}
#sub.business.maintenance .detail-table tbody tr td b{font-size: 1.6rem; font-weight: 800; letter-spacing: -0.48px; display: block; line-height: 18px; color: #0C0C0D;}
#sub.business.maintenance .detail-table tbody tr td em{font-size: 1.4rem; font-weight: 700; letter-spacing: -0.42px; color: #666666; line-height: 16px; display: block; margin-top: 5px;}
#sub.business.maintenance .detail-table tbody tr.total-wrap td{background: #29D4C1;}
#sub.business.maintenance .section4{padding-bottom: 168px;}
#sub.business.maintenance .detail-table tbody tr.com-wrap td{height: 120px;}
.path {opacity: 0; transition: opacity 2s;}


/* 250421 portfolio new */
.video-wrap {width:100%; padding-bottom:56.25%; box-sizing:border-box; position:relative; margin: 0 auto; border:0;}
.video-wrap video, .video-wrap iframe, .video-wrap embed {position:absolute; left:0; top:0; width:100%; height:100%; border:0; outline:0;}
.wrapper{position: relative; overflow: hidden;}
.wrapper::before {content: ''; display: block; width: 100%; height: 100%; max-height: 1170px; /* 理쒕� �믪씠 �ㅼ젙 */ background-image: url('/img/section1_bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: -1;}
.wrapper::after {content: ''; display: block; width: 100%; height: 100%; max-height: 1170px; /* 理쒕� �믪씠 �ㅼ젙 */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 85.31%, #FFF 100%), url('/img/section1_bg.jpg') 0px -334.571px / 100% 130.879% no-repeat, /* �띿뒪泥� �대�吏� */ #F7F7F7; /* 湲곕낯 諛곌꼍�� */ position: absolute; top: 0; left: 0; z-index: 0; /* 洹몃씪�곗씠�섏씠 諛곌꼍 �대�吏� �꾩뿉 �ㅻ룄濡� �ㅼ젙 */}
#sub.portfolio.view-new .section1 .section-body{max-width: 100%; padding: 0;}
#sub.portfolio.view-new .section1 .section-body .section-column{padding: 0 0; box-sizing: border-box;}
#sub.portfolio.view-new .section1 .section-body .section-column + .section-column{padding: 0 0;}
#sub.portfolio.view-new .section1 .section-column:first-child{max-width: 1440px; margin: 100px auto 0;}
#sub.portfolio.view-new .section1 .it-box .txt-box p{max-width: 902px;}
#sub.portfolio.view-new .tit-area .tit-box em{font-size: 3.0rem; font-weight: 400; line-height: 40px; letter-spacing: -0.9px;}
#sub.portfolio.view-new .tit-area .tit-box h1{font-size: 12rem; font-weight: 900; line-height: 133px; letter-spacing: -3.6px;}
#sub.portfolio.view-new .bg-txt-box .bg-txt {position: relative; display: block; width: fit-content; color: transparent; z-index: 1; overflow: hidden;}
#sub.portfolio.view-new .bg-txt-box .bg-txt.active {color: #000;}
#sub.portfolio.view-new .bg-txt-box .bg-txt.white.active {color: #fff;}
/* ::after濡� 寃��� 諛곌꼍 ��린 */
#sub.portfolio.view-new .bg-txt-box .bg-txt::after {content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #000; z-index: 2;}
#sub.portfolio.view-new .bg-txt-box .bg-txt.white::after {background: #fff;}
  /* �좊땲硫붿씠�� - ��퀬 �ㅼ떆 踰쀪린湲� */
#sub.portfolio.view-new .bg-txt-box.active .bg-txt::after {animation: cover-then-uncover 0.5s ease-in-out forwards;}
@keyframes cover-then-uncover {
    0% {
      width: 0%;
      left: 0;
    }
    40% {
      width: 100%;
      left: 0;
    }
    60% {
      width: 100%;
      left: 0;
    }
    100% {
      width: 0%;
      left: 100%;
    }
}
#sub.portfolio.view-new{font-family: 'NanumSquare Neo', sans-serif;}
#sub.portfolio.view-new .dateList li{line-height: 28px;}
#sub.portfolio.view-new .dateList li + li{margin-top: 10px;}
#sub.portfolio.view-new .dateList li > em{width: 62px;}
#sub.portfolio.view-new .dateList li > span{width: calc(100% - 72px); font-weight: 400;}
#sub.portfolio.view-new .dateList li > span a{color: #0C0C0D;}
#sub.portfolio.view-new .dateList li > span a:hover{color: #29D4C1; font-weight: 600;}
#sub.portfolio.view-new .section1 .it-wrap{display: block; width: 100%; height: 100vh; border-radius: 30px; overflow: hidden; margin: 0 auto; position: relative; margin-top:-5%;}
#sub.portfolio.view-new .section1 .it-wrap .marquee-wrap {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; overflow: hidden;}
#sub.portfolio.view-new .section1 .it-wrap strong{border: none; padding: 0; text-transform: uppercase;}
#sub.portfolio.view-new .link-btn:hover{color: #29D4C1;}
#sub.portfolio.view-new .section1 .it-wrap img{display: block; width: 100%; height: 100%; object-fit: cover;}
#sub.portfolio.view-new .txt-box{max-width: 1440px; margin: 0 auto;}
#sub.portfolio.view-new .txt-box > b{height: fit-content;}
#sub.portfolio.view-new .section1 .txt-box{padding: 140px 0; box-sizing: border-box;}

/* �좎뼱議� */
#sub.portfolio.view-new.yourzone .section2 .section-body{max-width: 100%; padding: 0;}
#sub.portfolio.view-new.yourzone .section2 .bg{position: relative; padding-bottom: 95.0132%;}
#sub.portfolio.view-new.yourzone .section2 .bg img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#sub.portfolio.view-new.yourzone .section2 .txt-box{padding: 14px 20px; box-sizing: border-box; position: absolute; bottom: 12.1%; left: 50%; transform: translateX(-50%); max-width: 1480px; margin: 0 auto;}
#sub.portfolio.view-new .bg-txt-box .bg-txt.white.active {color: #fff;}
#sub.portfolio.view-new .video-box{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%;}
#sub.portfolio.view-new.yourzone .section3,
#sub.portfolio.view-new.yourzone .section6,
#sub.portfolio.view-new.yourzone .section7{padding: 200px 0; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list{width: calc(100% - 40px); margin-left: 20px;}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li{width: 100%; max-width: 256px; min-height: 400px; border-radius: 500px; padding: 30px 29px; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li p > span:first-child{min-width: 32px;}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li p > span + span{width: calc(100% - 32px);}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li.gradient{background: linear-gradient(224deg, #0060F0 0%, #23EBC7 101.69%);}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li.blue{background: #0060F0;}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li.mint{background: #23EBC7;}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li.white{background: #ffffff; border: 1px solid #D8D8D8;}
#sub.portfolio.view-new.yourzone .styleguide-list .color-list li.black{background: #050505;}
#sub.portfolio.view-new.yourzone .styleguide-list .typography-list li .fontfamily{display: inline-block; border-radius: 100px; border: 1px solid #0C0C0D; padding: 9.5px 14px; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .styleguide-list .typography-list li b{display: inline-block; line-height: 240px; letter-spacing: 10px; background: linear-gradient(224deg, #0060F0 0%, #23EBC7 101.69%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#sub.portfolio.view-new.yourzone .styleguide-list .icon-list{}
#sub.portfolio.view-new.yourzone .styleguide-list .icon-list .ico{padding: 34px 29.22px; border-radius: 10px; border: 1px solid #D8D8D8; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .section4{position: relative; background: #000 url(/img/yourzone-section4-bg.jpg) no-repeat center center; background-size: cover; overflow: hidden;}
#sub.portfolio.view-new.yourzone .section4 .section-row{height: 100vh; gap: 57px;}
#sub.portfolio.view-new.yourzone .section4 .section-row .tit-area{width: fit-content;}
#sub.portfolio.view-new.yourzone .section4 .section-column{max-width: 553px;}
#sub.portfolio.view-new.yourzone .section4 .section-column + .section-column{max-width: 830px;}
#sub.portfolio.view-new.yourzone .section4 .marquee,
#sub.portfolio.view-new.yourzone .section4 .marquee2 {height: 100vh; overflow: hidden;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee{margin-left: 0 !important;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv{max-width: 385px; height: 440px; width: 100%; transition: 0.3s; position: relative; margin-bottom: 60px;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv .img_box, #sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv img{width: 100%; height: 100%;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv .txt-box{position: absolute; max-width: 100%; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; padding: 30px; box-sizing: border-box; z-index: 1; transition: 0.3s;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee a:hover .marqueeDiv .txt-box{opacity: 1;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv .txt-box::after{content: ''; clear: both; display: block; width: 100%; height: 100%; background: linear-gradient(234deg, rgba(35, 235, 199, 0.00) 24.57%, rgba(35, 235, 199, 0.50) 55.24%, #0060F0 87.02%); position: absolute; top: 0; left: 0; z-index: -1;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv .txt-box h3{font-size: 2.4rem; font-weight: 700; letter-spacing: -1.2px; color: #fff; line-height: 1;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv .txt-box p span{display: block; font-size: 1.4rem; font-weight: 500; color: #fff; text-transform: capitalize; line-height: 16px;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv .txt-box p span + span{margin-top: 3px;}
#sub.portfolio.view-new.yourzone .section4 .js-marquee .marqueeDiv .txt-box p span b{ font-weight: 800;}
#sub.portfolio.view-new.yourzone .section5 {padding: 160px 0; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .section5 .txt b{display: inline-block; background: linear-gradient(189deg, #0060F0 0%, #23EBC7 101.69%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#sub.portfolio.view-new.yourzone .section6{background-image: url(/img/yourzone-section6-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; padding-bottom: 0;}
#sub.portfolio.view-new.yourzone .section6 .section-column + .section-column{max-width: 1192px; margin: 0 auto;}
#sub.portfolio.view-new.yourzone .section6 .feature-list{background-color: #000; padding: 93.13px 0 122.76px;}
#sub.portfolio.view-new.yourzone .section6 .feature-list .tit-box b{font-size: 4.3458rem; font-weight: 800;}
#sub.portfolio.view-new.yourzone .section6 .feature-list .tit-box p{font-size: 1.49rem; line-height: 15px; letter-spacing: -0.745px; color: #aaaaaa; margin-top: 12.42px;}
#sub.portfolio.view-new.yourzone .section6 .marquee-wrap{margin-top: 37.25px;}
#sub.portfolio.view-new.yourzone .section6 .marquee-wrap + .marquee-wrap{margin-top: 15px; margin-left: 151px;}
#sub.portfolio.view-new .pro_fea li{display: inline-block; flex: 0 0 auto; width: 288.07px; max-width: 288.07px; padding: 24.83px; box-sizing: border-box; border-radius: 3.104px; border: 0.621px solid #2A2A2A; background: rgba(14, 14, 14, 0.70); height: fit-content;}
#sub.portfolio.view-new .pro_fea li + li{margin-left: 15px;}
#sub.portfolio.view-new .pro_fea li .txt b{display: block; font-size: 1.2417rem; font-weight: 600; line-height: 22px; letter-spacing: -0.621px; text-transform: capitalize; color: #fff; margin-top: 12.42px;}
#sub.portfolio.view-new .pro_fea li .txt em{display: block; font-size: 0.9933rem; font-weight: 350; color: #aaa; letter-spacing: -0.497px; line-height: 18px; text-transform: capitalize; margin-top: 6.21px;}
.profeaSwiper1 .swiper-wrapper,
.profeaSwiper2 .swiper-wrapper {transition-timing-function: linear !important; /* �딄� �놁씠 遺��쒕읇寃� */}
#sub.portfolio.view-new.yourzone .section6 .swiper-slide,
#sub.portfolio.view-new.yourzone .section6 .swiper-slide .txt > * {transition: all 0.3s ease;}
#sub.portfolio.view-new.yourzone .section6 .swiper-slide.blur {filter : grayscale(1); opacity: 0.7;}
#sub.portfolio.view-new.yourzone .section6 .swiper-slide.blur .txt > *{color: #696969 !important;}
#sub.portfolio.view-new.yourzone .section6 .swiper-slide.active {filter: none;}
#sub.portfolio.view-new.yourzone .section7{background-color: #000101;}
#sub.portfolio.view-new.yourzone .section7 .section-body{max-width: 1760px;}
#sub.portfolio.view-new.yourzone .section7 .section-body .section-column.txt-box{max-width: 1440px; margin: 0 auto;}
#sub.portfolio.view-new.yourzone .section7 .content-list .list{gap: 48px; overflow: hidden;}
#sub.portfolio.view-new.yourzone .section7 .content-list .list > *{max-height: 820px; border-radius: 20px; border: 1px solid #515151; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(20px); overflow: hidden; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .section7 .content-list .list.btm{margin-top: 48px;}
#sub.portfolio.view-new.yourzone .section7 .content-list .txtbox{padding: 40px; padding-bottom: 0; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .section7 .content-list .txtbox span{color: #D6DDE6; line-height: 28px; letter-spacing: -0.42px;}
#sub.portfolio.view-new.yourzone .section7 .content-list .list.top .le .imgbox{margin-right: 40px; border-radius: 0 10px 0 0; box-sizing: border-box; overflow: hidden;}
#sub.portfolio.view-new.yourzone .section7 .content-list .list.top .ri .imgbox,
#sub.portfolio.view-new.yourzone .section7 .content-list .list.btm .ri .imgbox{margin-left: 36px; border-radius: 10px 0 0 0; box-sizing: border-box; overflow: hidden;}
#sub.portfolio.view-new.yourzone .section7 .content-list .list.btm .le .imgbox{margin-left: 40px;}
#sub.portfolio.view-new.yourzone .section8 .section-body{max-width: 100%; padding: 0;}
#sub.portfolio.view-new.yourzone .section8 .section-body .section-column.txt-box{max-width: 1480px; padding: 120px 20px; box-sizing: border-box;}
#sub.portfolio.view-new.yourzone .section8 .con-wrap{position: relative; padding-bottom: 48.557%;}
#sub.portfolio.view-new.yourzone .section8 .con-wrap img{position: absolute; width: 100%; height: 100%; object-fit: cover;}
#sub.portfolio.view-new.yourzone .section9{background-image: url('/img/yourzone-section9-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 186px 0 206px;}
#sub.portfolio.view-new.yourzone .section9 .txt-box p span.fs200{display: inline-block; line-height: 235px; opacity: 0; filter: blur(10px); transition: none;}
#sub.portfolio.view-new.yourzone .section9 .txt-box p em{color: #CDCDCD;}
#sub.portfolio.view-new.yourzone .section9 .art-img{border-radius: 20px; overflow: hidden;}
#sub.portfolio.view-new.yourzone .section9 .section-column + .section-column{position: relative; z-index: 1; margin-top: -216px;}
#sub.portfolio.view-new.yourzone .section10{padding: 150px 0 80px;}
#sub.portfolio.view-new.yourzone .section10 .txt-box > p{width: fit-content; margin: 0 auto;}
#sub.portfolio.view-new.yourzone .section10 .txt-box em{line-height: 32px;}
#sub.portfolio.view-new.yourzone .section10 .view-navi{padding: 130px 0 0 0;}
#sub.portfolio.view-new.yourzone .section10 .view-navi li.list{ border: 1px solid transparent;}
#sub.portfolio.view-new.yourzone .section10 .view-navi li.list a {padding: 26px 47.12px; }
#sub.portfolio.view-new .link-btn{display: inline-block;}
#sub.portfolio.view-new .fs24{word-break: keep-all;}
.mo-1024{display: none !important;}

/* 怨⑦봽怨듦컧 */
.golf-main-txt{color: #009C21;}
#sub.portfolio.view-new.golf .section2{padding: 180px 0 374px;}
#sub.portfolio.view-new.golf .section2 .txt-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
#sub.portfolio.view-new.golf .section2 .txt-bg p{color: #F5F5F5; text-transform: capitalize; filter: blur(7px); white-space: nowrap;}
#sub.portfolio.view-new.golf .section2 .txt-bg p:nth-child(1){font-size: 21rem; line-height: 252px; letter-spacing: -6.3px;}
#sub.portfolio.view-new.golf .section2 .txt-bg p:nth-child(2){font-size: 24rem; line-height: 288px;letter-spacing: -7.2px; margin-top: 33px;}
#sub.portfolio.view-new.golf .section2 .txt-bg p:nth-child(3){font-size: 22rem; line-height: 264px; letter-spacing: -6.6px; margin-top: 38px;}
#sub.portfolio.view-new.golf .section3{background-color: #075C19; padding-top: 200px;}
#sub.portfolio.view-new.golf .section3 .section-body{max-width: 100%; padding: 0;}
#sub.portfolio.view-new.golf .section3 .section-column:not(.cont-column){max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
#sub.portfolio.view-new.golf .section3 .txt-box{margin: unset; margin-left: auto; max-width: fit-content;}
#sub.portfolio.view-new.golf .section3 .cont-wrap{gap: 38px; max-width: 1440px; margin: 0 auto; margin-bottom: 144px; padding: 0 20px; box-sizing: border-box;}
#sub.portfolio.view-new.golf .section3 .logobox{padding-top: 62px;}
#sub.portfolio.view-new.golf .section3 .cont-wrap img:nth-child(1){margin-top: 200px;}
#sub.portfolio.view-new.golf .section3 .cont-wrap img:nth-child(3){margin-top: 57px;}
#sub.portfolio.view-new.golf .section3 .left-img-box{position: absolute; top: -285px; left: 0; object-fit: cover; border-radius: 70px; overflow: hidden; z-index: 1;}
#sub.portfolio.view-new.golf .section3 .right-img{position: absolute; bottom: -95px; right: -305px; border-radius: 70px; overflow: hidden; box-shadow: 24px 24px 44px 0px rgba(0, 0, 0, 0.45); box-sizing: border-box;}
#sub.portfolio.view-new.golf .section4{padding: 200px 0 400px; margin-top: -147px; background-color: #fff;}
.font-weight-box li + li{margin-top: 40px;}
.font-weight-box li p{line-height: 60px;}
#sub.portfolio.view-new.golf .typography-list .letter-box em{position: absolute; top: 81px; right: 16px;}
#sub.portfolio.view-new.golf .color-system li .color{min-width: 120px; min-height: 120px; border-radius: 20px;}
#sub.portfolio.view-new.golf .color-system li .color.d-green{outline: 20px solid rgba(7, 92, 25, 0.20); background: #075C19;}
#sub.portfolio.view-new.golf .color-system li .color.grenn{outline: 20px solid rgba(0, 156, 33, 0.20); background: #009C21;}
#sub.portfolio.view-new.golf .color-system li .color.l-green{outline: 20px solid rgba(7, 212, 54, 0.20); background: #07D436;}
#sub.portfolio.view-new.golf .color-system li .color.l-gray{outline: 20px solid #F9F9F9; background: #E4EAE5;}
#sub.portfolio.view-new.golf .color-system li .color.white{outline: 20px solid rgba(226, 226, 226, 0.20); background: #fff;}
#sub.portfolio.view-new.golf .section5{background-color: #EAFFEF; border-radius: 300px 300px 0 0; padding-bottom: 200px;}
#sub.portfolio.view-new.golf .section5 .bg-txt-box{padding: 210px 0 148px; max-width: 586px;}
#sub.portfolio.view-new.golf .section5 .img-box{position: absolute; top: 0; right: 0;}
#sub.portfolio.view-new.golf .section5 .img-box .r-img{max-height: 803px; margin-top: -156px; margin-left: -85px; position: relative;}
#sub.portfolio.view-new.golf .section5 .img-box .step-box{z-index: 1; margin-top: -54px;}
#sub.portfolio.view-new.golf .section5 .line-box.line-box1{top: 271px; left: 29.3%; z-index: 2;}
#sub.portfolio.view-new.golf .section5 .img-box .step-box::after{content: ''; clear: both; display: block; width: 106%; height: 100%; background: url(/img/golf_section5_left_step.png) no-repeat center center; position: absolute; top: -68px; left: -11px; z-index: 1;}
#sub.portfolio.view-new.golf .section5 .cont-column{padding-top: 114px;}

.content-list .content-box > b{width: fit-content; line-height: 40px; border-radius: 500px; background: #07D436; padding: 8px 20.73px; box-sizing: border-box;}
.content-list .content-box > em{line-height: 32px;}
.content-list .content-box .relative-box {max-height: 920px;}
.content-list .content-box .rolling-box{width: 390px !important; height: 100%; overflow: hidden; border-radius: 40px; box-shadow: 10px 4px 24px 0px rgba(0, 0, 0, 0.08); border: 2px solid #2D2D2D;}
.content-list .content-box .rolling-box .rolling-item .swiper-slide{width: 100%; height: 100%; max-width: 390px; background-color: #fff;}
.content-list .content-box .rolling-box .rolling-item img{object-fit: cover;}
.content-list .content-box .relative-box .line-box{width: 100%; max-width: 351px; max-height: 143px; left: 50%; bottom: -110px; margin-left: -20px; z-index: 9;}
.content-list .content-box .img-wrap{margin-top: 76px;}
.content-list .content-box .img-wrap .img{margin-top: 190px; gap: 88px;}
.content-list .content-box .img-wrap .img img:not(.line-3, .click-svg){box-shadow: 10px 4px 24px 0px rgba(0, 0, 0, 0.08);}
.content-list .content-box .img-wrap .img > div{margin-top: 120px; height: fit-content;}
.line-box{position: absolute;}
.content-list .content-box .img-wrap .img .line-box{top: 32%; right: -67px;}
.click-svg{position: absolute; top: 163px; left: -60px; z-index: 1;}

/* ==================================================
	硫붾돱�� �섏씠吏�
================================================== */
#bodyWrap #wrapper {position: relative; width: 100%; padding-left: 260px; height: 100%; overflow: hidden;}
#bodyWrap #wrapper.on {height: auto; min-height: auto;}
#left_content{position:fixed; left:0; top: 0; height: 100%; box-sizing: border-box; background: #20211F; box-shadow: rgb(238, 238, 236) -1px 0px 0px 0px inset; width: 260px; box-sizing:border-box; z-index:50; transition: 0.3s all ease; padding: 0 15px;}
#left_content.hide{top: 60px; left: -260px !important;}
#left_content.hide > a.navBtn:before{display:none;}
#left_content.hide{background-color: #20211F; border-radius: 0 10px 10px 0; padding-bottom: 15px; box-shadow: rgb(238, 238, 236) -1px 0px 0px 0px inset; height: calc(100svh - 115px);}
#left_content.hide.on{left: 0 !important;}
#left_content.hide #main-nav{height: calc(100vh - 195px);}

#main-nav{padding: 0; padding-bottom: 40px; box-sizing: border-box; transition: 0.3s all ease; height: calc(100vh - 80px); overflow-y: auto;}
a.navBtn{position:fixed; left: 219px; top: 19px; width:26px; height:26px; line-height:26px; text-align:center; background-color:#fff; border: 1px solid #e0e0e0; border-radius: 5px; transition: 0.3s all ease; z-index: 999;}
a.navBtn.on{left: 15px;}
a.navBtn span{color:#20211F; font-size:17px;}
a.navBtn:before{content:""; display:none; position:absolute; left:0; top:50%; margin-top:-18.5px; width:1px; height:37px; background-color:#5c5c5c;}
a.navBtn .material-icons{line-height:26px;}
#main-nav h1{margin: 20px 0; box-sizing: border-box;}
#main-nav .gnb > ul > li{transition: 0.3s all ease;}
#main-nav .gnb > ul > li + li,
#main-nav .gnb > ul > li > ul > li + li,
.page-content > li + li{margin-top: 1px;}
#main-nav .gnb > ul > li > a{padding: 8px 10px; box-sizing: border-box; width: 100%; font-size: 1.4rem; font-weight: 600; color: #fff; letter-spacing: -0.5px;}
#main-nav .gnb > ul > li > a.on_in{background-image: none !important;}
#main-nav .gnb > ul > li > ul{display: none; padding: 5px 0; box-sizing: border-box;}
#main-nav .gnb > ul > li > ul.in{display: block;}
#main-nav .gnb > ul > li > ul > li > a,
.page-content > li a{width: 100%; font-size: 1.4rem; font-weight: 400; color: #fff; letter-spacing: -0.5px; position: relative; transition: 0.3s all ease; padding: 8px 0 8px 40px;}
#main-nav .gnb > ul > li > ul > li > a{opacity: 0.8;}
#main-nav .gnb > ul > li > ul > li > a.on{opacity: 1; font-weight: 600;}
#main-nav .gnb > ul > li > a.on,
#main-nav .gnb > ul > li > ul > li > a.on,
#main-nav .gnb > ul > li:hover > a,
#main-nav .gnb > ul > li > ul > li > a:hover,
.page-content > li a:hover{background-color: rgba(255, 255, 255, 0.03); border-radius: 7px; color: #29D4C1;}
#sub.manual .page-content > li a:hover{background-color: rgba(0, 0, 0, 0.03); color: #00ceb7; }
#sub.manual .page-content > li a:hover > span{border-color: #9dd9d2;}
#main-nav .gnb > ul > li > ul > li > a:hover{color: #fff;}
#main-nav .gnb > ul > li > ul > li > a.on{color: #fff;}
#main-nav .gnb > ul li a{display: block; position: relative; padding-left: 30px; box-sizing: border-box;}
#main-nav .gnb > ul li a:before,
.page-content > li a:before{content: ''; clear: both; display: block; width: 20px; height: 20px; background-image: url(/img/ico_description_w.svg); background-repeat: no-repeat; background-size: contain; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); transition: 0.3s all ease;}
#main-nav .gnb > ul > li > a.on:before,
#main-nav .gnb > ul > li:hover > a:before{background-image: url(/img/ico_description_m.svg);}
#main-nav .gnb > ul > li > ul > li > a:before{left: 15px;}

#main-nav .gnb > ul li.depth-1:nth-child(1) > a:before{background-image: url(/img/folder-4-line_w.svg);}
#main-nav .gnb > ul li.depth-1:nth-child(2) > a:before{background-image: url(/img/code-box-line_w.svg);}
#main-nav .gnb > ul li.depth-1:nth-child(3) > a:before{background-image: url(/img/mobile-download-line_w.svg);} 
#main-nav .gnb > ul li.depth-1:nth-child(4) > a:before{background-image: url(/img/lightbulb-line_w.svg);}
#main-nav .gnb > ul li.depth-1:nth-child(1) > a.on:before, #main-nav .gnb > ul li.depth-1:nth-child(1) > a:hover:before{background-image: url(/img/folder-4-line_m.svg);}
#main-nav .gnb > ul li.depth-1:nth-child(2) > a.on:before, #main-nav .gnb > ul li.depth-1:nth-child(2) > a:hover:before{background-image: url(/img/code-box-line_m.svg);}
#main-nav .gnb > ul li.depth-1:nth-child(3) > a.on:before, #main-nav .gnb > ul li.depth-1:nth-child(3) > a:hover:before{background-image: url(/img/mobile-download-line_m.svg);} 
#main-nav .gnb > ul li.depth-1:nth-child(4) > a.on:before, #main-nav .gnb > ul li.depth-1:nth-child(4) > a:hover:before{background-image: url(/img/lightbulb-line_m.svg);}

.manual-nav-wrap {font-size: 1.4rem;}
.manual-nav-wrap > a{color: rgb(50, 48, 44) !important; height: 38px; line-height: 38px;}
.manual-nav-wrap > span{color: rgba(84, 72, 49, 0.15);}
.search-nav-wrap{padding: 13px 20px; box-sizing: border-box; position:fixed; top:0; left:260px; width:calc(100% - 260px); z-index:999; background-color: #fff;}
.search-nav-wrap.on{padding: 13px 20px 13px 50px;}
.hover-fixed{min-width: 210px;}
.search-cont .nice-select{padding-left: 15px; padding-right: 20px; height: 38px; line-height: 36px; font-size: 1.3rem; min-width: 80px;}
.search-cont .nice-select:after{border-bottom: 1px solid #20211F; border-right: 1px solid #20211F;}
.search-cont .nice-select .list{width: 100%;}
.search-box input{padding: 0 15px !important; font-size: 1.3rem; font-weight: 500; height: 38px !important; line-height: 38px !important; border: 1px solid #ddd; border-radius: 5px; width: 300px !important;}
.search-box input:focus{outline: none; border: 1px solid #999;}
.search-btn{position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 0; border: none; background: none;}
.search-btn .material-symbols-outlined{font-size: 2.2rem;}

.layout {--content-width: minmax(auto, 708px); --margin-width: minmax(96px, 1fr); display: grid; grid-template-columns: [full-start] var(--margin-left-width, var(--margin-width)) [content-start] var(--content-width) [content-end] var(--margin-right-width, var(--margin-width)) [full-end]; width: 100%;}
.layout .section-inner{grid-column: content;}
.layout.layout-wide {--content-width: 1fr;--margin-width: 96px;}
#sub.manual .section{padding: 112px 15px; box-sizing: border-box; min-height: calc(100vh - 64px);}
#sub.manual .section .tit-box h1{white-space: break-spaces; word-break: break-word;}
#sub.manual .section .tit-box h1:focus{outline: none; border: none;}
.page-content > li a{display: block; font-size: 1.6rem; padding-left: 30px; color: #111;}
.page-content > li a:before{background-image: url(/img/ico_description.svg);}
.page-content > li a > span{display: block; width: fit-content; border-bottom: 1px solid #ddd; box-sizing: border-box;}
#sub.manual.view .cont-area{padding: 20px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; box-sizing: border-box;}
#sub.manual.view .cont-area p{padding:0; margin:0; font-size:1.5rem; line-height: 1.8;}
#sub.manual.view .cont-area img{max-width:100%;}
#sub.manual .btnSet .btn{background: #20211F; color: #fff; transition: 0.3s all ease; padding-left: 30px; position: relative; min-width: 75px; transition: 0.3s all ease;}
#sub.manual .btnSet .btn:before{content: ''; clear: both; display: block; width: 18px; height: 18px; background-image: url(/img/ico_arrow_back_w.svg); background-repeat: no-repeat; background-size: contain; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); transition: 0.3s all ease;}
#sub.manual .btnSet .btn:hover:before{background-image: url(/img/ico_arrow_back_b.svg);}
#sub.manual .btnSet .btn:hover{background: #29D4C1; color: #20211F;}
.copyright span{font-size: 1.0rem; color: #fff; line-height: 14px;}
.copyright span + span{opacity: 0.7;}

.search-result-item h3{margin-top:10px;}
.search-result-item p{margin-top:10px; font-size:1.4rem;}
#sub.manual .btn-more{ border:1px solid #ddd; border-radius: 5px; box-sizing: border-box; font-size:1.2rem;}
#sub.manual .btn-more:hover{color:#00ceb7; }

/* 硫붿씤 鍮꾩＜�� 踰꾪듉 �� 媛� �숈씪 �ш린 �좎� */
.visual_btn .button-circle {
    width: clamp(120px, 18vw, 180px);
    height: clamp(120px, 18vw, 180px);
    min-width: clamp(120px, 18vw, 180px);
    min-height: clamp(120px, 18vw, 180px);
    padding: 0;
}

.visual_btn .button-circle span {
    white-space: nowrap;
}