#mainVisual 
{width:100%; height:var(--mainVisual-height); padding-left:16rem; display:flex; align-items:center;}
/* 비주얼 왼쪽 */
.main-visual-wrapper
{width:100%; height:100%; position: relative;}
.main-visual-slide
{position:relative; width:100%; height:100%;;}
.main-visual-slide .main-visual-item
{display:flex; }
.main-visual-slide, .main-visual-slide .slick-list, .main-visual-slide .slick-track, .main-visual-item 
{height:100%;}
.main-visual-slide .main-visual-item .main-visual-img 
{position:relative; width:80rem; height:100%; overflow:hidden;}


/* 메인 비주얼 이미지 내 슬라이드 */
.main-visual-bg 
{width:100%; height:100%; background:#010c18; position:absolute; left:0; top:0;}
.visual-vertical-horizontal-slide-con
{position:relative; width:100%; height:100%;}
.visual-vertical-horizontal-slide-con:before
{content:''; position:absolute; width:100%; height:58%; bottom:0; background:linear-gradient(29deg, #86e9fb66, #86e9fb8c, #86e9fb7a, #86e9fb26, transparent, transparent); z-index:9; mix-blend-mode: color;}
.visual-vertical-horizontal-slide-con:after
{content:''; position:absolute; width:100%; height:100%; background:linear-gradient(213deg, #010c18, #010c18e0, #010c18cf, #010c1899, #010c1882, transparent); z-index:9; top:0;}
.visual-vertical-horizontal-slide-con .swiper-wrapper{-webkit-transition-timing-function:linear!important; -o-transition-timing-function:linear!important; transition-timing-function:linear!important;}

.main-visual-txt 
{position:absolute; left:0; top:22%; width:80rem; z-index:999}
.main-visual-txt .visual-txt-inner
{padding:0 5rem;}
.main-visual-txt h2
{font-size:3.5rem; color:#fff; font-weight:500;}
.main-visual-txt .txt1
{margin-bottom:3rem;}
.main-visual-txt .txt2 
{text-align:right;}
.main-visual-txt .point
{font-size:4.5rem; font-weight:700;}
.main-visual-txt .counter-wrap
{display:inline-block; position:relative}
.main-visual-txt .counter-up
{font-size:8rem; font-weight:800; display:inline-block;}
.main-visual-txt .dots
{position: relative;}
.main-visual-txt .dots1
{left:10%;}
.main-visual-txt .dots2
{left:35%;}
.main-visual-txt .dots3
{left:60%;}
.main-visual-txt .dots4
{left:87%;}
.main-visual-txt .dots:after
{position:absolute; content:''; width:1rem; height:1rem; display:inline-block; background:var(--main-color); border-radius:50%; left:calc(50% - 0.5rem);}



/* 비주얼 오른쪽 */
.visual-right-txt-con
{width:calc(100% - 80rem); height:100%; position:relative;}
.visual-right-txt-con .bg-deco-txt
{position:absolute; top:100px; left:7rem;}
.visual-right-txt-con .bg-deco-txt b
{position:absolute; font-family:'GmarketSans'; font-weight:900; color:#f5f6fa; font-size:27rem; line-height:1; transform:rotateX(-90deg); transition:all 1s ease;transform-origin:center; overflow:hidden;}
.visual-right-txt-con .bg-deco-txt b:nth-child(2)
{top:20.7rem; left:30rem; transform:rotateX(-90deg);  }


.visual-right-txt-con .right-txt-con 
{display:flex; flex-direction:column; justify-content:center; padding:0 16rem 0 13rem; width:100%; height:100%; position:relative; z-index:9; }
.visual-right-txt-con .right-txt-con .slogan
{font-size:5rem; font-weight:300; text-align:right; margin-bottom:10rem; animation: text-fade-out 1s cubic-bezier(0.4, 0, 0.2, 1) both; display:inline-block; width:100%;}
.visual-right-txt-con .right-txt-con .slogan strong
{color:var(--main-color);}
.visual-right-txt-con .right-txt-con .info-txt-con
{animation: text-fade-out 1s cubic-bezier(0.4, 0, 0.2, 1) both; display:inline-block;}
.visual-right-txt-con .right-txt-con .info-txt-con h4
{font-size:3rem; margin-bottom:1rem; font-weight:500;}
.visual-right-txt-con .right-txt-con .info-txt-con h2
{font-size:4.5rem; font-weight:700;}
.visual-right-txt-con .right-txt-con .info-txt-con h2 strong
{font-weight:900;}

.visual-right-txt-con .right-txt-con .info-txt-con .txt1
{font-size:2rem; color:var(--main-color); font-weight:600; margin:3rem 0 1rem}
.visual-right-txt-con .right-txt-con .info-txt-con .txt2
{font-size:2rem; color:#000; font-weight:500;}

.active .visual-right-txt-con .bg-deco-txt b
{animation: test-animation 1s ease 0.2s both; display:inline-block; }
.active .visual-right-txt-con .right-txt-con .slogan
{animation: text-left-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both; display:inline-block;}
.active .visual-right-txt-con .right-txt-con .info-txt-con
{animation: text-down-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1s both;; display:inline-block;}



@keyframes test-animation {
	to {
    opacity:1;
		-webkit-transform: rotate(0); 
		transform: rotate(0); 
	}
}


.visual-horizontal-slide-con .horizontal-slide .item
{width:auto;}
/* 슬라이드 1번 */
.visual-vertical-slide-con .vertical-slide:nth-child(1)
{transform:rotate3d(1, 0, 20, 51deg) translate(0, 520px)}
.visual-vertical-slide-con .vertical-slide:nth-child(2)
{transform:rotate3d(1, 0, 20, 51deg) translate(0, 0px)}
.visual-vertical-slide-con .vertical-slide:nth-child(3)
{transform:rotate3d(1, 0, 20, 51deg) translate(0, -520px)}
.visual-vertical-slide-con .item
{width:auto; /*transform:rotate(-90deg); margin:0 -6rem;*/ transform:rotate3d(1.1,0.1,2,-90deg); margin:0 -7rem;}


.visual-vertical-slide-con .main-catalog-slide .item
{margin:0 3rem;}
.visual-vertical-slide-con .main-catalog-slide.swiper-4 .item,
.visual-vertical-slide-con .main-catalog-slide.swiper-5 .item
{margin:0 -5rem;}
.visual-vertical-slide-con .main-catalog-slide.swiper-5.vertical-slide:nth-child(3)
{transform:rotate3d(1, 0, 20, 51deg) translate(0, -585px);}


.main-visual-controls
{position:absolute; width:100%; bottom:7rem; z-index:999}
.main-visual-controls-wrap
{display:flex; align-items:center; flex-wrap:wrap; padding:0 5rem;}
.visual-paging-controls
{display:flex; align-items:center; font-size:2rem; color:#ffffff75; font-weight:600;}
.visual-paging-controls .cur
{color:#fff;}
.visual-paging-controls em
{font-size:17px; margin:0 1rem; transform:rotate(13deg);}
.progress-bar-con
{width:20rem; height:3px; margin-left:2rem; position:relative;}
.progress-bar-con .total-bar
{width:100%; height:100%; position:absolute; left:0; background:rgba(255,255,255,0.3);}
.progress-bar-con .ing-bar
{width:0%; height:100%; background:#fff; position:absolute; left:0;}
.progress-bar-con.active .ing-bar
{width:100%; transition: all 4.5s ease;}



.main-visual-scroll-icon
{position:absolute; right:16rem; bottom:3rem; ;}

.main-title-con
{margin-bottom:5rem;}
.main-title-con h2
{font-size:6rem; font-weight:800; display:inline-block; position:relative;}
.main-title-con h2:after
{position:absolute; content:''; width:1rem; height:1rem; border-radius:50%; background:var(--main-color); right:-3rem; bottom:1rem;}
.main-title-con p 
{font-size:2.4rem; color:#111; font-weight:300; margin-top:3rem;}


.main-portfolio
{position:relative; padding:7rem 0 0; overflow:hidden;}
.main-portfolio .portfolio-banner
{position:relative; width:0%; height:30rem; background:var(--main-color); left:50%; background-image:url('../img/main_banner_bg_icon01.png'),url('../img/main_banner_bg_icon02.png'); background-position:-4% -40%, 100% -37%; background-repeat:no-repeat; transition:all 1s cubic-bezier(0.42, 0.71, 0.2, 1.0);}
.main-portfolio .portfolio-banner .inner 
{padding:7rem 0;}
.main-portfolio .portfolio-banner .txt-con
{text-align:center; opacity:0; visibility:hidden; }
.main-portfolio .portfolio-banner .txt-con h4
{font-size:3.5rem; color:#fff; font-weight:400; margin-bottom:1rem;}
.main-portfolio .portfolio-banner .txt-con h2
{font-size:8rem; color:#fff; font-weight:800;}
.main-portfolio .portfolio-banner.animated
{width:95%; left:2.5%;}
.main-portfolio .portfolio-banner.animated .txt-con
{opacity:1; visibility:visible; transition:all 0.5s 1s ease;}
.main-portfolio-content
{padding:17.5rem 0 15rem; margin-top:-6rem; background-image:url('../img/main_portfolio_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;}
.main-portfolio-container
{max-width:1800px; margin:0 auto; background:#ffffffcf; padding:10rem 5rem 8rem 5rem }
.main-portfolio-content .portfolio-more-btn 
{text-align:center; margin-top:5rem;}
.main-portfolio-content .portfolio-more-btn a
{display:inline-block; width:25rem; text-align:center; border:1px solid #ddd; border-radius:50px; padding:2.5rem 2rem; font-size:1.8rem; background:var(--main-color); color:#fff; transition:all 0.3s ease;}
.main-portfolio-content .portfolio-more-btn a:hover 
{background:var(--sub-color);}




.main-portfolio-top
{position:relative; }
.main-portfolio-top .category
{width:100rem; margin-bottom:8rem;}
.main-portfolio-top .category .category-wrap
{display:flex; flex-wrap:wrap; align-items:center; border-radius:50px; width:100%; background:linear-gradient(128deg, #ededed, #f5f5f6); width:100%; border-radius:50px; padding:6px;}
.main-portfolio-top .category .category-wrap b 
{font-size:2rem; color:#000; min-width:17rem; text-align:center; font-weight:800; letter-spacing:-0.02em;}
.main-portfolio-top .category .category-wrap ul
{display:flex; width:calc(100% - 17rem); background:#fff; border-radius:50px;}
.main-portfolio-top .category .category-wrap ul li 
{padding:1rem 2rem; border-radius:50px; min-width:16rem; text-align:center; font-size:2rem; font-weight:500; flex-grow:1; cursor:pointer; transition:all 0.3s ease;}
.main-portfolio-top .category .category-wrap ul li:hover
{color:var(--main-color)}
.main-portfolio-top .category .category-wrap ul li.active
{background:var(--main-color); color:#fff;}
.main-portfolio-more-icon
{position:absolute; right:0; top:-5rem;}
.main-portfolio-tab-con
{max-width:1800px; margin:0 auto;}
.main-portfolio-list
{display:flex; flex-wrap:wrap; justify-content:space-between;  margin:0 -1rem; -webkit-transition-timing-function:linear!important; -o-transition-timing-function:linear!important; transition-timing-function:linear!important;}
.photo .main-portfolio-list
{flex-wrap:nowrap}
.main-portfolio-list .item
{width:calc(calc(100% / 4) - 2rem); position:relative; margin:0 1rem 4rem;}
.main-portfolio-list .item a
{position:relative; vertical-align: top; display:block; width:100%; height:100%;}
.main-portfolio-list .item .thumbnail-box
{position:relative;}
.main-portfolio-list .item .thumbnail-box img
{vertical-align: top; width:100%;}

.main-portfolio-list .item .txt-box 
{position:absolute; width:100%; bottom:0; padding:2rem 3rem;}
.main-portfolio-list .item .txt-box h6
{font-size:1.4rem; color:#fff; font-weight:600}
.main-portfolio-list .item .txt-box h2 {
  font-size:2rem; color:#fff; font-weight:700;
}
.main-portfolio-list .item .more-btn 
{position:absolute; width:6rem; height:6rem; right:0; bottom:0; background:rgba(0,0,0,0.3); border-radius:15px 0 0 0; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease;}
.main-portfolio-list .item .more-btn .icon
{background-image:url('../img/main_port_item_arrow.png'); width:2rem; height:2rem; background-position:center;}
.main-portfolio-list .item a[href]:hover .more-btn
{background:var(--main-color);}

.main-portfolio-content.animated .main-portfolio-list
{margin:0 -1.5rem; }
.main-portfolio-content.animated .portfolio-list-con.photo .main-portfolio-list .item
{width:auto; margin:0 1.5rem 4rem;}


.main-portfolio-content.animated .main-portfolio-container
{max-width:100%; transition:all 0.5s 0.8s ease;}
.main-portfolio-content.animated .main-portfolio-list
{margin:0 -1rem;}
.main-portfolio-content.animated .main-portfolio-list .item
{width:calc(calc(100% / 4) - 3rem); margin:0 0.5rem 4rem}

/* 파트너사 */
.main-partner
{position:relative;}
.main-partner-con
{padding:10rem 0;}
.main-partner-con p
{font-size:4rem; color:#000; font-weight:500;}
.main-partner-con p b 
{color:var(--main-color)}
.main-partner-list-slide
{overflow:hidden; }
.main-partner-list-slide .swiper-wrapper
{-webkit-transition-timing-function:linear!important; -o-transition-timing-function:linear!important; transition-timing-function:linear!important; padding:5rem 0}
.main-partner-list-slide .slide-item 
{position:relative; height:9rem; display:flex; align-items:center; justify-content: center; min-width:300px; max-width:350px; padding:7rem 0;;}
.main-partner-list-slide .slide-item > img
{ -webkit-filter: grayscale(100%) brightness(50%);  filter: grayscale(100%) brightness(50%); z-index:9; position: relative; mix-blend-mode: plus-lighter;}
.main-partner-list-slide .slide-item .active-img
{position:absolute; top:-43%; left:0; display:none;}
.main-partner-list-slide .slide-item:hover .active-img 
{display:block;}
.main-partner-bg-txt 
{position:absolute; right:0; bottom:0; overflow:hidden; z-index:-1;}
.main-partner-bg-txt b
{display:block; text-align:right; font-size:14.5rem; color:#f8f8f8; line-height:1;;}  



.main-consult
{padding:6rem 0;}
.main-consult-con .consult-banner
{background:var(--main-color); border-radius:10px; padding:4rem;}
.main-consult-con .consult-banner ul
{display:flex;}
.main-consult-con .consult-banner ul li 
{padding:2rem 4rem; flex-grow:1; border-right:1px solid #ffffff26;}
.main-consult-con .consult-banner ul li:last-child
{border:none;}
.main-consult-con .consult-banner .tit
{font-size:2rem; color:#fff; font-weight:700; text-shadow:1px 1px 1px #212121cc; display:block; margin-bottom:1rem;}
.main-consult-con .consult-banner .txt
{font-size:1.8rem; color:#fff; display:block; text-shadow:1px 1px 1px #212121cc;}


.main-consult-inquiry .main-consult-inquiry .table_02 
{width:100%;}
.main-consult-inquiry .table_02 
{margin:0;}
.main-consult-inquiry .table_02 > tbody 
{display: flex; flex-wrap: wrap; justify-content: space-between;}
.main-consult-inquiry .table_02 > tbody > tr 
{padding:1.5rem 3rem; width:32.5%; height:auto !important; background-color: #f4faff;  display: flex; flex-wrap: wrap; border-radius: 10px; margin-bottom: 10px; border:1px solid #d7e3ec;}
.main-consult-inquiry .table_02 >tbody> tr:nth-child(3):nth-child(3)
{width:32.5%}
.main-consult-inquiry .table_02 > tbody > tr:nth-child(4)
{width:100%; padding:3rem;}
.main-consult-inquiry .table_02 > tbody > tr:nth-child(5)
{width:100%;}
.main-consult-inquiry .table_02 > tbody > tr > td 
{padding: 0 5px; height: 100%; display: flex; align-items: center; }
.main-consult-inquiry .table_02 > tbody > tr > td:nth-child(1) 
{width:12rem !important; background:transparent; padding:0 5px;}
.main-consult-inquiry .table_02 > tbody > tr > td:nth-child(2) 
{width: calc(100% - 12rem) !important;;}
.main-consult-inquiry .table_02 > tbody > tr > td > input
{height:30px; width:100% !important; padding:0 1rem; background-color: transparent; border: none;;}
.main-consult-inquiry .table_02 > tbody > tr > td font 
{font-size: 18px; color: #666; position: relative; font-family:'Pretendard';}
.main-consult-inquiry .table_02 > tbody > tr:nth-child(1) > td font::after,
.main-consult-inquiry .table_02 > tbody > tr:nth-child(2) > td font::after,
.main-consult-inquiry .table_02 > tbody > tr:nth-child(4) > td font::after 
{position: absolute; content: "*"; color: #0669bf; top: 0; right: -10px; display: inline-block;}
.main-consult-inquiry .table_02 > tbody > tr:nth-child(4) > td
{align-items:start; height:150px !important;}
.main-consult-inquiry .table_02 > tbody > tr:nth-child(4)
{width:100%; }
.main-consult-inquiry .table_02 > tbody > tr:nth-child(4) .formmail_cell_bgcolor textarea
{width: 100%; border:none; height:100% !important}


.main-consult-inquiry
{display:flex; flex-wrap:wrap; margin-top:6rem;}
.main-consult-inquiry .formamil01
{width:75%;}
.main-consult-inquiry .formamil01 .inquiry-send-btn 
{margin-top:2rem; width:100%; text-align:center; max-width:100%}
.main-consult-inquiry .formamil01 .inquiry-send-btn a
{display:inline-block; padding:2rem; font-size:1.7rem; color:#fff; border-radius:10px; min-width:20%; text-align:center; background:linear-gradient(80deg, var(--main-color), #609cd5); letter-spacing:-0.04em;}
.main-consult-inquiry .send-circle-btn
{width:25%; padding-left:3rem;}
.main-consult-inquiry .send-circle-btn a
{position:absolute;}
.main-inquiry-send-icon 
{display:inline-flex; justify-content: center; align-items: center; width:100%; height:100%; position:relative;}




/* FOOTER */
#footer 
{border-top:1px solid #ddd; padding:4rem 0;}
#footer .f-top-con
{display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:4rem;}
#footer .f-top-con .f-logo
{background-image:url('../img/f_logo.png'); width:201px; height:69px;}
#footer .f-top-con .f-sns-con 
{display:flex; align-items:center;}
#footer .f-top-con .f-sns-con a
{margin-left:3rem;}
#footer .f-bottom-con
{display:flex; flex-wrap:wrap; align-items:end;}
#footer .f-bottom-con .f-info-con
{width:70%;}
#footer .f-bottom-con .f-info-con li
{margin:0.5rem 0;}

#footer .f-bottom-con .f-info-con span
{font-size:1.6rem; color:#222; font-weight:400; margin-right:3rem; display:inline-block;}
#footer .f-bottom-con .f-info-con a
{color:#222; transition:all 0.3s ease;}


#footer .f-bottom-con .f-info-con .copy
{margin-top:1rem; font-size:1.6rem; color:#777; font-weight:300;}
#footer .f-bottom-con .f-police-con
{width:30%; text-align:right;}
#footer .f-bottom-con .f-police-con a 
{font-size:1.6rem; color:#000000; font-weight:600; margin-left:3rem;}






/* Rolling Circle */
.rolling-circle-img
{width:14rem; height:14rem; animation:rollingCircle 15s linear infinite; position:relative;}
.rolling-circle
{position:absolute; width:100%; height:100%; top:0; padding:1.2rem;}
.rolling-circle .circle-inner
{display:flex; align-items:center; justify-content: center; width:100%; height:100%; flex-direction:column; background:#fff; border-radius:50%;;}
.rolling-circle .circle-inner span
{font-size:1.6rem; font-weight:500; color:#000; text-align:center;}
.rolling-circle .circle-inner span b
{display:block; font-weight:800;}

@keyframes rollingCircle {
  0% {
    transform:rotate(0deg)
  }
  100% {
    transform:rotate(360deg);
  }
}



#openQuickMenu
{display:none;  width:35px; height:120px; background:#1fc8f7; border-radius:5px 0 0 5px; position: relative; right:7rem; transition: all 0.5s ease;}
#openQuickMenu span
{background-image:url('../img/quick-menu-btn.png'); width:11px; height:20px; display:inline-block; transform:rotate(180deg); }
#quickMenu .quick-menu-list.active
{right:-7rem;}
#openQuickMenu.active 
{right:0rem}
#openQuickMenu.active span
{right:0; transform:rotate(0deg)}

#quickMenu 
{position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:9999;}
#quickMenu .quick-menu-list
{right:0rem; position:absolute; top:50%; transform:translateY(-50%); transition: all 0.5s ease;;}
#quickMenu .quick-menu-list .item
{width:7rem; text-align:center; border-radius:5px 0 0 5px; background:#fff; box-shadow:-20px 0px 13px #a1a1a10d}
#quickMenu .quick-menu-list .item .inner
{padding:2rem 0.5rem; display:flex; flex-direction:column; justify-content:center; align-items:center;}
#quickMenu .quick-menu-list .item i
{width:22px; height:20px; background-position:center; background-repeat:no-repeat;}
#quickMenu .quick-menu-list .item p
{font-size:1.5rem; color:#111111; font-weight:600; margin-top:2rem;;}

#quickMenu .quick-menu-list .call
{background:#2982d8; border-radius:5px 0 0 5px;}
#quickMenu .quick-menu-list .call p
{writing-mode:vertical-rl; font-size:1.5rem; color:#fff; }
#quickMenu .quick-menu-list .kakao
{background:#ffd800;}
#quickMenu .quick-menu-list .kakao p
{color:#111;}




@media screen and (max-width:1580px) {
  .main-visual-slide .main-visual-item .main-visual-img
  {width:65rem;}
  .main-visual-txt
  {width:65rem;}
  .visual-right-txt-con .right-txt-con
  {padding:0 8rem 0 5rem;}
}
@media screen and (max-width:1300px) {
  #sidebar
  {display:none;}
  #mainVisual
  {padding:0; height:auto;;}
  .main-visual-slide .main-visual-item .main-visual-img
  {width:50rem; }
  .main-visual-txt
  {width:50rem;}
  .visual-right-txt-con
  {width:calc(100% - 50rem)}
  .main-visual-txt h2
  {font-size:2.5rem;}
  .main-visual-txt .counter-up
  {font-size:5rem;}
}

@media screen and (max-width:1280px) {
  .main-portfolio-container
  {/*max-width:95%;*/ padding:10rem 2rem 8rem 2rem;}
  .main-portfolio-top .category
  {width:100%;}
  .main-portfolio-top .category .category-wrap
  {border-radius:10px; padding:20px;}
  .main-portfolio-top .category .category-wrap ul
  {width:100%; margin-top:1rem;}
  .main-portfolio-top .category .category-wrap ul li
  {font-size:1.8rem;}
  .main-portfolio-list
  {justify-content: start;}
  .main-portfolio-content .main-portfolio-list .item
  {width:calc(calc(100% / 3) - 3rem); margin:0 1.5rem 4rem 1.5rem;}
  
  .main-partner-con p
  {font-size:3rem;}
  .main-partner-con p br 
  {display:none;}
}



@media screen and (max-width:1024px) {
  .visual-right-txt-con .right-txt-con .slogan
  {font-size:3rem;}
  .active .visual-right-txt-con .right-txt-con .slogan
  {margin-bottom:3rem;}
  .visual-right-txt-con
  {height:auto;}
  .visual-right-txt-con .right-txt-con
  {padding:0 5rem;}
  .main-portfolio .portfolio-banner .txt-con h4
  {font-size:2.5rem;}
  .main-consult-con .consult-banner ul
  {flex-wrap:wrap;}
  .main-consult-con .consult-banner ul li
  {border-right:none; border-bottom:1px solid #ffffff26; width:100%;}
  .main-consult-inquiry .formamil01
  {width:100%;}

  #footer .f-top-con .f-sns-con
  {margin-top:3rem;}
  #footer .f-top-con .f-sns-con a
  {margin:0 2rem 0 0; }
  #footer .f-bottom-con .f-info-con
  {width:100%;}
  #footer .f-bottom-con .f-police-con
  {width:100%; text-align:left; margin-top:1rem;}
  #footer .f-bottom-con .f-police-con a
  {margin:0 2rem 0 0}
}

@media screen and (max-width:820px) {
  .main-portfolio .portfolio-banner
  {width:100%; left:0;}
  .main-portfolio .portfolio-banner .txt-con
  {opacity:1; visibility:visible;}
  .main-portfolio .portfolio-banner .inner
  {padding:6rem 2rem}

  #quickMenu
  {position:fixed; bottom:0; width:100%; right:auto; left:0; top:auto; transform:none; z-index:999}
  #openQuickMenu 
  {display:none;}
  #quickMenu .quick-menu-list 
  {width:100%; display:flex; bottom:0; position:relative; right:0; top:auto; transform:none;}
  #quickMenu .quick-menu-list .item 
  {width:25%; text-align:center; border-radius:0; box-shadow:none;}
  #quickMenu .quick-menu-list .item .inner 
  {padding:1rem 0.5rem}
  #quickMenu .quick-menu-list .item.call
  {border-radius:0;}
  #quickMenu .quick-menu-list .call p
  {writing-mode:unset}
  #quickMenu .quick-menu-list .item p
  { font-weight:300; margin-top:5px; font-size:1.3rem;;}
  #quickMenu .quick-menu-list .item p br 
  {display:none;}
  #quickMenu .quick-menu-list .item i
  {background-repeat:no-repeat; width:15px ;height:15px; background-size:cover;}

  #footer
  {padding-bottom:4rem 0 12rem}
}
@media screen and (max-width:767px) {
  #header {height:80px;}
  .main-title-con p br 
  {display:none;}
  /* 비주얼 */
  #mainVisual
  {margin-top:80px;}
  .main-visual-slide .main-visual-item .main-visual-img
  {width:100%; height:30rem;}
  .main-visual-txt .txt1
  {margin-bottom:1rem; font-size:1.8rem;}
  .main-visual-txt .point
  {font-size:4rem;}
  .main-visual-txt h2
  {font-size:1.9rem;}
  .main-visual-txt .counter-up 
  {font-size:4rem;}
  .visual-vertical-slide-con .vertical-slide:nth-child(3)
  {transform:rotate3d(1, 0, 20, 51deg) translate(-330px, -520px);}
  .main-visual-slide .main-visual-item
  {flex-wrap:wrap;}

  .main-visual-txt
  {top:7%; width:100%;}
  .visual-right-txt-con .bg-deco-txt
  {top:0; left:0;}
  .visual-right-txt-con .bg-deco-txt b
  {font-size:12rem;}
  .visual-right-txt-con .bg-deco-txt b:nth-child(2)
  {top:10.7rem; left:18rem;}
  .visual-right-txt-con
  {width:100%;}
  .visual-right-txt-con .right-txt-con
  {padding:4rem 2rem;}
  .visual-right-txt-con .right-txt-con .slogan
  {margin-bottom:3rem;}
  .visual-right-txt-con .right-txt-con .info-txt-con h4
  {font-size:2rem;}
  .visual-right-txt-con .right-txt-con .info-txt-con h2
  {font-size:3.8rem;}

  .visual-right-txt-con .right-txt-con .info-txt-con .txt1
  {font-size:1.8rem;}
  .visual-right-txt-con .right-txt-con .info-txt-con .txt2
  {font-size:1.8rem;}
  

  .main-visual-controls
  {bottom:-2rem;}
  .visual-paging-controls
  {color:#222;}
  .visual-paging-controls .cur
  {color:#222;}
  .main-visual-controls-wrap
  {padding:0 2rem;}
  .progress-bar-con
  {margin:1rem 0 0; width:100%;}
  .progress-bar-con .total-bar
  {background:#999}
  .progress-bar-con .ing-bar
  {background:var(--main-color)}

  .main-visual-scroll-icon
  {display:none;}

  .main-portfolio-container
  {padding:10rem 2rem 3rem 2rem}
  .main-portfolio-content
  {padding:6rem 0}
  .main-portfolio .portfolio-banner
  {background-position:-4% -300%, 100% -37%; height:auto;}
  .main-portfolio .portfolio-banner .txt-con h2
  {font-size:4rem;}
  .main-portfolio .portfolio-banner .txt-con h4
  {font-size:2rem}
  .main-portfolio-top .category
  {margin-bottom:5rem;}
  .main-portfolio-top .category .category-wrap b
  {min-width:auto; width:100%; text-align:left; font-size:3.2rem; display:none;}
  .main-portfolio-top .category .category-wrap ul
  {flex-wrap:wrap; border-radius:0;}
  .main-portfolio-top .category .category-wrap ul li
  {width:50%; border-radius:0; font-size:1.5rem; padding:1.5rem 1rem;}
  
  .main-portfolio-content .main-portfolio-list .item
  {width:calc(calc(100% / 2) - 3rem)}

  .main-title-con
  {margin-bottom:2rem;}
  .main-partner-bg-txt b
  {font-size:6.5rem;}
  .main-partner-con
  {padding:5rem 0;}
  .main-partner-con p
  {font-size:1.7rem;}


  .main-consult-con .consult-banner
  {padding:2rem;}
  .main-consult-con .consult-banner .tit
  {text-shadow:1px 1px 1px #21212170;}
  .main-consult-con .consult-banner .txt 
  {font-size:1.6rem; text-shadow:1px 1px 1px #21212170;}
  .main-consult-inquiry .formamil01 .inquiry-send-btn a
  {min-width:60%;}

  .main-consult-inquiry .table_02 > tbody > tr
  {width:100%; padding:1.5rem 1rem;}
  .main-consult-inquiry .table_02 > tbody > tr > td:nth-child(1)
  {display:flex !important; margin:0; width:8rem !important}
  .main-consult-inquiry .table_02 > tbody > tr > td:nth-child(2) {margin:0; width:calc(100% - 8rem) !important}
  .main-consult-inquiry .table_02 > tbody > tr:nth-child(4)
  {padding:1.5rem 1rem;}
  .main-consult-inquiry .table_02 > tbody > tr > td > input
  {height:40px; text-align:left;}
  .main-consult-inquiry .send-circle-btn
  {display:none;}
  .main-consult-inquiry .table_02 > tbody > tr > td font
  {font-size: 16px;}
  
  #footer .f-top-con .f-logo
  {width:170px; height:58px; background-size:cover;}


}

@media screen and (max-width:500px) {
  .main-title-con h2
  {font-size:3.2rem;}
  .main-title-con p
  {font-size:1.7rem; margin-top:1rem;}
  
  .main-portfolio-content .main-portfolio-list .item
  {width:100%;}
  .main-portfolio-more-icon
  {top:-16rem; right:10rem;}

  
  .main-consult-con .consult-banner ul li
  {padding:2rem 0;}

  #footer .f-bottom-con .f-police-con a
  {width:40%; margin:0rem 2rem 1rem 0; display:inline-block;}
}