@charset "utf-8";




/********** 타이틀 **********/
.sub_tit{
  position: relative;
}
/* .sub_tit::before{
  content: ''; display: block; width: 1px; height: 70px; background: #000;
  position: absolute; top: -95px; left: 50%;
} */
.sub_tit strong{
    display: block;
    font-size: 3rem;
    font-weight: 600;
    color: #222;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 1.7rem;
}
.sub_tit_s span{
    display: block;
    font-size: 1.125rem;
    color: #666;  letter-spacing: -0.8px;
    line-height: 1;
}

.section_title{
  border-bottom: 2px solid #ccc;
}
.section_title span{
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0 1% 6px 1%;
  letter-spacing: -1px;
  margin-bottom: -2px;
  border-bottom: 2px solid #444;
  color: #222;
}

@media screen and (max-width:1440px){
  .sub_tit::before{
    top: -88px;
  }
}
@media screen and (max-width:768px){
  .sub_tit::before{
    top: -90px;
  }
  .sub_tit strong{
    font-size: 2.6rem;
  }
  .sub_tit_s span{
    font-size: 1rem;
  }
}
@media screen and (max-width:640px){
  .sub_tit strong{
    font-size: 2.4rem;
  }
}
@media screen and (max-width:425px){
  .sub_tit::before{
    top: -85px;
  }
}





/* *********************스타일 공통************************* */

/* 탭 */
.tab_style::after{
  content: ''; display: block; clear: both;
}
.tab_style li{
  float: left;
}
.tab_style li a{
  display: block;
  text-align: center;
  color: #bbb;
  font-weight: 600;
  padding: 1.5rem 0;
  line-height: 1;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #444;

  -webkit-transition: all .1s cubic-bezier(.08, .03, .22, .87);
  -moz-transition: all .1s cubic-bezier(.08, .03, .22, .87);
  -o-transition: all .1s cubic-bezier(.08, .03, .22, .87);
  transition: all .1s cubic-bezier(.08, .03, .22, .87);
}
.tab_style li:last-child a{
  border-right: 1px solid #ddd;
}
.tab_style li.on a{
  color: #333;
  cursor: default;
  border-top: 1px solid #444;
  border-left: 1px solid #444;
  border-bottom: 1px solid #fff;
}
.tab_style li.on:last-child a{
  border-right: 1px solid #444;
}
.tab_style li.on+li a{
  border-left: 1px solid #444;
}
.tab_style li a:hover{
  background: #f9f9f9;
}
.tab_style li.on a:hover{
  background: #fff;
}

.tab_content > div{
  display: none;
  padding-top: 3rem;
}

@media screen and (max-width:640px){
  .tab_style li a{
    padding: 1.2rem 0;
  }
}






/* 테이블 */
.basic_table_area { overflow-x: auto; width:100% }/*표*/
.basic_table_area .guide {color:#939393; font-size:13px;}
.basic_table_area .guide.right {text-align:right;}
.basic_table_area .guide.left {text-align:left;}
.basic_tb{table-layout:fixed; width:100%;  word-break:break-all; vertical-align:middle;}
.basic_tb tr th {padding: 1rem 20px; font-size: 1rem; color: #000; border-bottom:1px solid #e9e9e9 ; border-right:1px solid #e9e9e9; line-height:1.4em;  text-align:center}
.basic_tb tr td  { padding:16px 20px; border-bottom:1px solid #e9e9e9 ; border-right:1px solid #e9e9e9; line-height:1.4em;  text-align:center;vertical-align:middle;}
.basic_tb tr td.bg{background: #f9f9f9; font-weight: 500;}
.basic_tb tr td ul li{
  position: relative; text-align: left; padding-left: 12px; margin-top: 4px;
}
.basic_tb tr td ul li:first-child{
  margin-top: 0;
}
.basic_tb tr td ul li::before{
  content: ''; display: block; width: 4px; height: 4px; background: #b7b7b7;
  position: absolute; left: 0; top: 11px;
}
.basic_tb tr th {background:#f9f9f9 ; border-top:2px solid #333; vertical-align:middle;}
.basic_tb tr th:last-child {border-right:0px;}
.basic_tb tr td:last-child {border-right:0px;}
.basic_tb .left { text-align: left }
.basic_tb .right { text-align: right }
.basic_tb td img{ max-width:100%}
.basic_tb tr td p {line-height:1.5em;}
@media screen and (max-width:1280px){
  .basic_tb tr td ul li::before{
    top: 8px;
  }
}
@media screen and (max-width:640px){
  .basic_tb tr th,.basic_tb tr td  { padding:5px 8px; }
  .basic_tb tr th{font-size: 1rem;}
  .basic_tb tr td ul li{
    padding-left: 10px;
  }
  .basic_tb tr td ul li::before{
    top: 7px;
  }
}
@media screen and (max-width:420px){
  .basic_tb tr th br {display:none;}
}



/* 컨텐츠 내용 */
.section_content{
  padding-left: 1%; box-sizing: border-box;
  letter-spacing: -0.8px;;
}
.section_content li{
  padding-left: 0.7rem; position: relative;     margin: 0.4rem 0;
}
.section_content li::before{
  content: ''; display: block; width: 3px; height: 3px; background: #999;
  position: absolute; left: 0; top: 0.7rem;
}



/********** 팝업 레이어 **********/
.layer_wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}
.layer_wrap .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}
.layer_wrap .pop-layer {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600px;
  height: auto;
  background-color: #fff;
  z-index: 10;
}
.layer_wrap .container{
    padding: 1.6rem 2.4rem;
}
.layer_wrap .container .tit{
  font-size: 1.4rem;
  color: #111;
  font-weight: 600;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1.5rem;
}
.layer_wrap .close_btn{
  width: 45px; height: 45px; border: none; outline: none; cursor: pointer;
  background: url('/assets/dex/img/contents/portfolio_close.png') no-repeat;
  position: absolute; right: -55px; top: 0; opacity: 0.8;
}

@media screen and (max-width:768px){
  .layer_wrap .pop-layer{
    width: 400px;
  }
  .layer_wrap .container .tit{
    line-height: 1.2;
  }
  .layer_wrap .close_btn{
    width: 32px;
    height: 32px;
    background-size: 32px;
    right: -40px;
  }
}
@media screen and (max-width:500px){
  .layer_wrap .pop-layer{
    width: 75%;
  }
  .layer_wrap .container{
    padding: 1.4rem 1.6rem;
  }
}



/********** 어바웃, 서비스 페이지 공통 **********/
.lc{display: none;}
.m{display: none;}
@media screen and (max-width: 860px){
    .m{display: block;}
    .w{display: none;}
}
/* 애니메이션 */
.ani_opa{opacity: 0; animation: ani_opa 1s both; animation-timing-function: ease-in-out;}
.ani_opa1{animation-delay: 0.25s;}
.ani_opa2{animation-delay: 0.75s;}
.ani_opa3{animation-delay: 1.15s;}
.ani_opa4{animation-delay: 1.55s;}
.ani_opa5{animation-delay: 1.8s;}

.fadein_left{animation: fadein_left 1.5s both; animation-timing-function: ease;}
.fadein_right{animation: fadein_right 1.5s both; animation-timing-function: ease;}

.hide_top{animation: hide_top 0.5s both; animation-timing-function: ease;}
.hide_left{animation: hide_left 0.5s both; animation-timing-function: ease;}
.hide_right{animation: hide_right 0.5s both; animation-timing-function: ease;}

@keyframes ani_opa{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes rotate{
    100% {transform: rotate(360deg);}
}
@keyframes fadein_left{
    0%{transform: translateX(-20%); opacity: 0;}
    100%{transform: translateX(0); opacity: 1;}
}
@keyframes fadein_right{
    0%{transform: translateX(20%); opacity: 0;}
    100%{transform: translateX(0); opacity: 1;}
}
@keyframes hide_top{
    0%{transform: translateY(0); opacity: 1;}
    100%{transform: translateY(-50%); opacity: 0;}
}
@keyframes hide_left{
    0%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(-20%); opacity: 0;}
}
@keyframes hide_right{
    0%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(20%); opacity: 0;}
}

/********** 어바웃 페이지 **********/
.about{}

/* about1 */
.about1{position: fixed; z-index: 2; left: 0 !important; top: 0 !important; width: 100%;}
.about1 .cont{width: 100%; height: 100vh;}
.about1 .box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.about1 .box .sup{width: 906px; margin: 0 auto; text-align: center; /*perspective: 20vw;*/}
.about1 .box .sup > p{line-height: 108%; font-size: 124px; font-family: 'Butler'; /*color: #222;*/ color: var(--black); box-sizing: border-box; /*opacity: 0; transform: rotateX(-90deg); transform-origin: center top; transition: all 1s;*/}
.about1 .box .sup > p.on{transform: rotateX(0); opacity: 1;}
.about1 .box .sup > p:nth-child(even){text-align: right;}
.about1 .box .sup > p:nth-child(odd){text-align: left;}
.about1 .box .sup > p:first-child {text-align: center !important;}
.about1 .box .sup > p span{display: inline-block; /*transform: translateY(150px); transition: all 0.3s;*/}
.about1 .box .sup > p.on span{transform: translateY(0px);}
.about1 .box .sup > p span:nth-child(1){transition-delay: 0s}
.about1 .box .sup > p span:nth-child(2){transition-delay: 0.05s;}
.about1 .box .sup > p span:nth-child(3){transition-delay: 0.1s;}
.about1 .box .sup > p span:nth-child(4){transition-delay: 0.15s;}
.about1 .box .sup > p span:nth-child(5){transition-delay: 0.2s;}
.about1 .box .sup > p span:nth-child(6){transition-delay: 0.25s;}
.about1 .box .sup > p span:nth-child(7){transition-delay: 0.3s;}
.about1 .box .sup > p span:nth-child(8){transition-delay: 0.35s;}

.about1 .box.kor {width:;}
.about1 .box.kor .sup {width: ;}
.about1 .box.kor .sup > p {line-height: 7rem; font-size: 5.05rem; font-family: inherit !important; white-space: nowrap;}
.about1 .box.kor .sup > p:first-child,
.about1 .box.kor .sup > p:nth-child(2) {font-weight:200;}
.about1 .box.kor .sup > p:nth-child(2) { display:flex; justify-content: flex-end; align-items: center;}
.about1 .box.kor .sup > p:nth-child(2) span {display:block; padding-left:0.75rem;}
.about1 em.sub_detail {display:block; font-size:1rem; font-weight:500; line-height:1.5rem; color: var(--point-color); white-space: normal;}
.about1 em.sub_detail b {font-weight:500;}

.about1 .box.kor .sup > p:nth-child(3) {}
.about1 .box.kor .sup > p:nth-child(3),
.about1 .box.kor .sup > p:last-child {font-weight:700;}


@media screen and (max-width: 1280px){
    .about1 .box .sup{width: 70vw;}
    .about1 .box .sup > p {font-size: 9vw;}
}
@media screen and (max-width: 1080px){
.about1 .box.kor .sup > p {line-height: 5.25rem; font-size: 4rem;}
.about1 em.sub_detail {font-size:0.95rem; line-height:1.35rem;  font-weight:400;}
.about1 em.sub_detail b {font-weight:400;}
}
@media screen and (max-width: 860px){
    .about1 .box .sup{width: 80vw;}
    .about1 .box .sup > p{font-size: 11vw;}
	.about1 em.sub_detail br {display:none;}
	.about1 .box.kor .sup > p {line-height: 4.5rem; font-size: 3rem;}
}
@media screen and (max-width: 568px){
    .about1 .box .sup{width: 85vw;}
    .about1 .box .sup > p{font-size: 12.5vw;}
	.about1 em.sub_detail b {display:none;}
}
@media screen and (max-width: 425px){
    .about1 .box{top: 45%;}
	.about1 .box.kor .sup > p {line-height: 4rem; font-size: 2.75rem;}
}

/* about2 */
.about2{box-sizing: border-box; margin: 100vh auto 120vh !important;}
.about2 .img_wrap{}
.about2 .img_wrap .img{}
.about2 .img_wrap .img:not(:first-child){margin-top: 70vh;}
.about2 .img_wrap .img:nth-child(2){/*margin-top: -105px;*/ }
.about2 .img_wrap .img:nth-child(3){/*margin-top: 105px;*/ }
.about2 .img_wrap .img:nth-child(4){/*margin-top: 105px;*/ }
.about2 .img_wrap .img:after{content: ""; display: block; clear: both;}
.about2 .img_wrap .img:nth-child(1){margin-right: 6%;}
.about2 .img_wrap .img:nth-child(2){margin-left: 9.482%;}
.about2 .img_wrap .img:nth-child(3){margin-right: 15.517%;}
.about2 .img_wrap .img:nth-child(4){margin-left: 17.816%;}
.about2 .img_wrap .img:nth-child(1) img{float: right; width: 28%;}
.about2 .img_wrap .img:nth-child(2) img{float: left; width: 44%;}
.about2 .img_wrap .img:nth-child(3) img{float: right; width: 40%;}
.about2 .img_wrap .img:nth-child(4) img{float: left; width: 24%;}
@media screen and (max-width: 1760px){
    .about2 .img_wrap .img:nth-child(1) img{}
    .about2 .img_wrap .img:nth-child(2) img{}
    .about2 .img_wrap .img:nth-child(3) img{}
    .about2 .img_wrap .img:nth-child(4) img{}
}
@media screen and (max-width: 568px){
    .about2 .img_wrap .img:nth-child(1) img{width: 48%;}
    .about2 .img_wrap .img:nth-child(2) img{width: 51.034%;}
    .about2 .img_wrap .img:nth-child(3) img{width: 63.333%;}
    .about2 .img_wrap .img:nth-child(4) img{width: 42.701%;}
}

/* about3 */
.about3{position: relative; z-index: 3; width: 100%; /*height: auto;*/ height: 100vh; box-sizing: border-box; background: #999 url("/assets/site/img/contents/bg_about.png") no-repeat center; background-size: cover; background-attachment: fixed;}

.about3 .wrap{height: 100%;}
.about3 .show_item{opacity: 0; transform: translateY(10%); transition: all 0.4s;}
.about3.show .show_item{opacity: 1; transform: translateY(0%);}
.about3.show .show_item1{transition-delay: 0s;}
.about3.show .show_item2{transition-delay: 0.4s;}
.about3.show .show_item3{transition-delay: 0.8s;}
.about3.show .show_item4{transition-delay: 1.2s;}
.about3 .about_tit{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: #fff; text-align: center;}
.about3 .about_tit .sup{font-size: 30px; font-weight: 600; line-height: 130%;}
.about3 .about_tit .sup .lc2{display: block;}
.about3 .about_tit .sub {font-size: 17px; font-weight: 400; box-sizing: border-box; padding: 40px 0 0;}
.about3 .about_tit .sub .lc1{display: block;}
.about3 .about_tit ul {width:30%; margin:0 auto;}
.about3 .about_tit ul li {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; text-align:left; border-bottom:1px solid rgba(255,255,255,.15); padding:0.5rem 1rem;}
.about3 .about_tit ul li:last-child {border-bottom:0px;}
.about3 .about_tit ul li span {display:block; width:35%; font-size:13px; font-weight:800; letter-spacing:0.5px;}
.about3 .about_tit ul li p {width:65%; font-size:15px;}




@media screen and (max-width: 1500px){
    .about3 .about_tit ul {width:50%;}
}
@media screen and (max-width: 1280px){
    .about3{}
    .about3 .about_tit .sup{font-size: 28px;}
    .about3 .about_tit .sub{font-size: 16px; padding: 4% 0 0;}
    .about3 .about_tit .sub .lc1{display: none;}
}
@media screen and (max-width: 1024px){
    .about3 .about_tit .sup .lc1{display: block;}
    .about3 .about_tit .sup .lc2{display: none;}
	.about3 .about_tit ul {width:80%;}
}
@media screen and (max-width: 860px){
    .about3{}
    .about3 .wrap{}
    .about3 .about_tit .sup{font-size: 26px;}
    .about3 .about_tit .sub{font-size: 15px; padding: 8% 0 0;}
}
@media screen and (max-width: 700px){
	.about3 {height:80vh; background: #999 url("/assets/site/img/contents/bg_about.png") no-repeat center; background-size: cover; background-attachment: inherit;}
    .about3 .about_tit .sup .lc1{display: none;}
    .about3 .about_tit .sup .lc2{display: none;}
}
@media screen and (max-width: 568px){
    .about3 .about_tit .sup{font-size: 22px;}
    .about3 .about_tit .sub{font-size: 14px;}
	.about3 .about_tit ul {width:100%;}
	.about3 .about_tit ul li span {width:30%; font-size:12px; font-weight:700;}
	.about3 .about_tit ul li p {width:70%; font-size:14px;}
}
@media screen and (max-width: 500px){
    /*.about3{background-attachment: scroll;}*/
}
@media screen and (max-width: 425px){
    .about3 .about_tit .sup .lc0{display: block;}
    .about3 .about_tit .sup .lc2{display: block;}
    .about3 .about_tit .sup .lc3{display: block;}
}

 /* iOS only */
@supports (-webkit-touch-callout: none) {
    .about3{background-attachment: scroll;}
}



/********** 서비스 페이지 **********/
.ser{}

/* ser1 */
.ser1{position: relative; height: 100vh;}
.ser1 .box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ser1 .box .sup{width: 830px; margin: 0 auto; text-align: center;}
.ser1 .box .sup > p{position:relative; line-height: 108%; font-size: 5.05rem; font-weight:200; line-height:7rem; text-transform: uppercase; /*color: #222;*/ color: var(--black); box-sizing: border-box;}
.ser1 .box .sup > p:nth-child(even){text-align: right;}
.ser1 .box .sup > p:nth-child(odd){text-align: left;}
.ser1 .box .sup > p:first-child,
.ser1 .box .sup > p:last-child{text-align: center !important;}
.ser1 .box .sup > p.bold {font-weight:700;}
.ser1 .box .sup > p span {display:inline-block; width:12px; height:12px; border-radius:6px; background: var(--point-color); position:absolute; top:20%; margin-left:-8px; display:none;}
.ser1 .box .sub{margin: 40px auto 0; font-size: 17px; text-align: center; display:none;}
@media screen and (max-width: 1280px){
    .ser1 .box .sup{width: 70vw;}
    .ser1 .box .sub{font-size: 16px;}
}
@media screen and (max-width: 1080px){
.ser1 .box .sup > p{font-size: 4rem; line-height:5.25rem;}
}
@media screen and (max-width: 860px){
    .ser1 .box .sup{width: 70vw;}
	.ser1 .box .sup > p{font-size: 3rem; line-height:4.5rem;}
    .ser1 .box .sub{font-size: 15px;}
}
@media screen and (max-width: 660px){
    .ser1 .box .sub .lc2{display: block;}
    .ser1 .box .sub .lc3{display: block;}
}
@media screen and (max-width: 568px){
    .ser1 .box .sup{width: 88vw;}
	.ser1 .box .sup > p{font-size: 2.85rem; line-height:4.25rem;}
    .ser1 .box .sub{font-size: 14px;}
}
@media screen and (max-width: 425px){
    .ser1 .box{top: 45%;}
	.ser1 .box .sup > p{font-size: 2.75rem; line-height:4rem;}
    .ser1 .box .sub .lc1{display: block;}
}
@media screen and (max-width: 425px){
	.ser1 .box .sup > p{font-size: 2.65rem; line-height:3.9rem;}
}
/* .scroll_pin (ser2, ser4 공통적용)  */
.scroll_pin{display: flex; max-width: none; width: 92%; margin: 0 auto;}
.scroll_pin > *{/*width: 50%;*/}
.scroll_pin .left-content{/*width: 0;*/ width: 100vw; height: 100vh; position: relative; font-size: 60px; /*white-space: nowrap;*/ }
.scroll_pin .left-content > *{position: absolute; left: 0%; right: 0; top: 30%; opacity: 0; visibility: hidden;}
.scroll_pin .left-content .tit{}
.scroll_pin .left-content .tit .txt{line-height: 108%; font-size: 110px; font-family: 'Butler'; text-transform: uppercase; /*color: #222;*/ color: var(--black); box-sizing: border-box;}
.scroll_pin .left-content .tit.kor .txt{line-height: 120%; font-size: 60px; font-weight: 700; font-family: 'Pretendard', 'Roboto', '맑은고딕', Malgun Gothic, sans-serif,'Sans-serif', 돋움, 'dotum'; /*color: #333;*/ color: var(--black);}
.scroll_pin .left-content .tit .des{font-size: 17px; margin: 25px 0 20px;}
.scroll_pin .left-content .tit.kor .des{font-size: 17px; margin: 35px 0 0;}
.scroll_pin .left-content .tit .list{font-size: 17px; font-weight: 300; color: var(--point-color);}

.scroll_pin .right-content{z-index: -1; width: 0; box-sizing: border-box;}
.scroll_pin .right-content:after{content: ""; display: block; clear: both;}
.scroll_pin .right-content .img{float: right; clear: both; position: relative; box-sizing: border-box; padding: 550px 0 100px; /*border: 1px dashed #000;*/ /* <- 보더, 영역확인용 */}
.scroll_pin .right-content .img.contentMarker{/*border-top: 2px solid red;*/ /* <- 보더, 영역확인용 */}
.scroll_pin .right-content .img.pos0{/*margin-right: 1.041vw;*/}
.scroll_pin .right-content .img.pos1{margin-right: 8.59vw;}
.scroll_pin .right-content .img.pos2{margin-right: 31.24vw;}
.scroll_pin .right-content .img:after{content: ""; display: block; clear: both;}
.scroll_pin .right-content .img .img_box{font-size: 0;}
.scroll_pin .right-content .img .img_box.size1{width: 1199px;}
.scroll_pin .right-content .img .img_box.size2{width: 685px;}
.scroll_pin .right-content .img .img_box.size3{width: 540px;}
.scroll_pin .right-content .img .img_box img{position: relative; vertical-align: middle;}
.scroll_pin .right-content .img .img_box.size1 img:nth-child(1){z-index: 3; width: 43.119%;}
.scroll_pin .right-content .img .img_box.size1 img:nth-child(2){z-index: 2; margin-left: -4.587%; width: 32.944%;}
.scroll_pin .right-content .img .img_box.size1 img:nth-child(3){z-index: 1; margin-left: -4.420%; width: 32.944%;}
.scroll_pin .right-content .img .img_box.size2 img{width: 100%;}
.scroll_pin .right-content .img .img_box.size3 img{width: 100%;}
.scroll_pin .right-content .img .txt{position: relative; margin-top: -1.75rem; box-sizing: border-box; padding: 0 24px;}
.scroll_pin .right-content .img .txt .title{}
.scroll_pin .right-content .img .txt .title .eng{line-height: 108%; font-size: 0.925rem; text-transform: uppercase; letter-spacing:0px; font-weight:800; color: var(--point-color);}
.scroll_pin .right-content .img .txt .title .kor{box-sizing: border-box; font-size: 2.85rem; font-weight: 300;}
.scroll_pin .right-content .img .txt .exp {margin-top:1rem;}
.scroll_pin .right-content .img .txt .exp .des{box-sizing: border-box;}
.scroll_pin .right-content .img .txt .exp .list{font-weight:600; margin-top:0.75rem; }


@media screen and (max-width: 1760px){
    .scroll_pin{/*max-width: 100%; margin: 0 2.5%;*/}

    .scroll_pin .right-content .img{}
    .scroll_pin .right-content .img .img_box.size1{width: 68.908vw;}
    .scroll_pin .right-content .img .img_box.size2{width: 39.367vw;}
    .scroll_pin .right-content .img .img_box.size3{width: 31.034vw;}
    .scroll_pin .right-content .img .img_box img{}
}
@media screen and (max-width: 1280px){
    .scroll_pin{/*max-width: 100%; margin: 0 4%;*/ width: 93%;}
    .scroll_pin .left-content .tit .txt{font-size: 8.5vw;}
    .scroll_pin .left-content .tit.kor .txt{font-size: 5vw;}
    .scroll_pin .left-content .tit .des{font-size: 16px; margin: 4% 0 2%;}
    .scroll_pin .left-content .tit.kor .des{font-size: 16px; margin: 4% 0 2%;}
    .scroll_pin .left-content .tit .list{font-size: 16px;}

    .scroll_pin .right-content .img {padding: 50vh 0 10vh;}
    .scroll_pin .right-content .img .txt{padding: 0 1vw 0 2vw; margin-top: -20px;}
    .scroll_pin .right-content .img .txt .title .kor{font-size: 2.5rem; font-weight: 400;}
    .scroll_pin .right-content .img .txt .exp .des{}
    .scroll_pin .right-content .img .txt .exp .list{}
}
@media screen and (max-width: 1024px){
    .scroll_pin .right-content .img .txt{top: 88%;}
}
@media screen and (max-width: 860px){
    .scroll_pin .left-content .tit .txt{font-size: 10vw;}
    .scroll_pin .left-content .tit.kor .txt{font-size: 6vw;}
    .scroll_pin .left-content .tit .des{font-size: 15px;}
    .scroll_pin .left-content .tit.kor .des{font-size: 15px;}
    .scroll_pin .left-content .tit .list{font-size: 15px;}

	.scroll_pin .right-content {display:flex; flex-direction: column; align-items: flex-start;}
	.scroll_pin .right-content .img {padding: 6.5vh 0; margin:0 0; width:100%; }
	.scroll_pin .right-content .img .img_box {}
    .scroll_pin .right-content .img .img_box.size1{width: 85vw;}
    .scroll_pin .right-content .img .img_box.size2{width: 60vw;}
    .scroll_pin .right-content .img .img_box.size3{width: 50vw;}
    .scroll_pin .right-content .img .txt{top: 87%;}
	.scroll_pin .right-content .img.pos0 {margin-right:0;}
	.scroll_pin .right-content .img.pos2 {margin-right:0;}
	.scroll_pin .right-content .img.pos1 {margin-right:0;}
	.scroll_pin .right-content .img.img2,
	.scroll_pin .right-content .img.img4 {text-align: right;}
	.scroll_pin .right-content .img.img2 .img_box,
	.scroll_pin .right-content .img.img4 .img_box {float:right;}
	.scroll_pin .right-content .img.img2 .txt,
	.scroll_pin .right-content .img.img4 .txt {float:right;}
	.scroll_pin .right-content .img.img2:after,
	.scroll_pin .right-content .img.img4:after {content:''; display:block; clear:both;}
}
@media screen and (max-width: 568px){
    .scroll_pin .left-content .tit .des{font-size: 14px;}
    .scroll_pin .left-content .tit.kor .des{font-size: 14px;}
    .scroll_pin .left-content .tit .list{font-size: 14px;}

    .scroll_pin .right-content .img .txt{top: 86.5%; margin-top: -16px;}

}
@media screen and (max-width: 425px){
    .scroll_pin .left-content .tit .txt{font-size: 40px;}
    .scroll_pin .left-content .tit.kor .txt{font-size: 26px;}
    .scroll_pin .left-content .tit .des{}

    .scroll_pin .right-content .img {padding: 4vh 0;}
    .scroll_pin .right-content .img .txt{top: 86%; margin-top: -14px;}
    .scroll_pin .right-content .img .txt .title .kor{font-size: 1.75rem; line-height:2.5rem;}
    .scroll_pin .right-content .img .txt .title .eng{font-size: 0.8rem;}
}

/* ser2 개별 적용 */
.ser2{}

/* ser3 */
.ser3{
  width: 100%; height: auto; /*height: 1356px;*/ padding: 228px 0 96px; box-sizing: border-box; background: #999 url("/assets/site/img/contents/bg_ser3.jpg") no-repeat center; background-size: cover;
  background-attachment: fixed;
}
.ser3 .wrap{height: 100%;}
.ser3 .show_item{opacity: 0; transform: translateY(10%); transition: all 0.4s;}
.ser3.show .show_item{opacity: 1; transform: translateY(0%);}
.ser3.show .show_item1{transition-delay: 0s;}
.ser3.show .show_item2{transition-delay: 0.4s;}
.ser3.show .show_item3{transition-delay: 0.8s;}
.ser3.show .show_item4{transition-delay: 1.2s;}
.ser3 .ser_tit{color: #fff;}
.ser3 .ser_tit .sup{font-size: 60px; font-weight: 700; line-height: 120%;}
.ser3 .ser_tit .sub{font-size: 17px; font-weight: 400; box-sizing: border-box; padding: 40px 0 0;}
.ser3 .ser_tit .sub .lc2{display: block;}
.ser3 .mark_process{max-width: 1484px; margin: 0 auto; padding: 100px 0 0;}
.ser3 .mark_process:after{content: ""; display: block; clear: both;}
.ser3 .mark_process li{float: left; position: relative; width: 26.954%; box-sizing: border-box; margin-left: -2.695%;}
.ser3 .mark_process li:first-child{margin-left: 0;}
.ser3 .mark_process li .circle{position: relative; padding: 100% 0 0; box-sizing: border-box;  border-radius: 50%; text-align: center; transition: 0.8s;}
.ser3.show .mark_process li .circle{transform: rotateY(360deg);}
.ser3 .mark_process li:nth-child(1) .circle{transition-delay: 0.6s;}
.ser3 .mark_process li:nth-child(2) .circle{transition-delay: 0.8s;}
.ser3 .mark_process li:nth-child(3) .circle{transition-delay: 1.0s;}
.ser3 .mark_process li:nth-child(4) .circle{transition-delay: 1.2s;}
.ser3 .mark_process li .circle:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; border: 1px dashed #fff; animation: rotate 100s linear infinite; transform-origin: 50% 50%;}
.ser3 .mark_process li .circle .txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 120%; font-size: 22px; font-weight: 700; color: #fff; white-space: nowrap;}
.ser3 .deco_txt{box-sizing: border-box; padding: 107px 0 0; line-height: 100%; font-size: 160px; font-family: 'Butler'; text-align: right; color: #fff;}
@media screen and (max-width: 1760px){
    .ser3{padding: 12% 0 8%;}
    .ser3 .ser_tit{}
    .ser3 .deco_txt{font-size: 130px;}
}
@media screen and (max-width: 1540px){
    .ser3 .deco_txt{font-size: 7vw;}
}
@media screen and (max-width: 1280px){
    .ser3{background-position: center right 15%;}
    .ser3 .ser_tit .sup{font-size: 5vw;}
    .ser3 .ser_tit .sub{font-size: 16px; padding: 4vw 0 0;}
    .ser3 .mark_process{padding: 10% 0 0;}
    .ser3 .mark_process li .circle .txt{font-size: 20px;}
    .ser3 .deco_txt{padding: 10% 0 0;}
}
@media screen and (max-width: 1024px){
    .ser3 .mark_process li{width: 26%; margin-left: -1.4%;}
    .ser3 .mark_process li .circle .txt{font-size: 2vw;}
}
@media screen and (max-width: 860px){
    .ser3{/*background-clip: content-box; padding: 20% 0 8%;*/ margin: 60px 0 0;}
    .ser3 .wrap{padding: 12% 0 8%;}
    .ser3 .ser_tit .sup{font-size: 6vw;}
    .ser3 .ser_tit .sub{font-size: 15px;}
    .ser3.show .mark_process li .circle{transform: none;}
    .ser3 .mark_process li .circle .txt{font-size: 16px;}
}
@media screen and (max-width: 768px){
    .ser3 .mark_process li .circle .txt{}
}
@media screen and (max-width: 568px){
    .ser3 .ser_tit .sub{font-size: 14px;}
    .ser3 .mark_process li{width: 52%; margin-left: -4%;}
    .ser3 .mark_process li:nth-child(odd){margin-left: 0;}
    .ser3 .mark_process li:nth-child(n+3){margin-top: -4%;}
    .ser3 .mark_process li .circle .txt{}
    .ser3 .mark_process li .circle .txt .lc{display: block;}
}
@media screen and (max-width: 460px){
    .ser3 .ser_tit .sub .lc2{display: none;}
    .ser3 .mark_process li .circle .txt{font-size: 12px;}
}
@media screen and (max-width: 425px){
    .ser3{background-attachment: scroll;}
    .ser3 .ser_tit .sup{font-size: 26px;}
    .ser3 .ser_tit .sub .lc1{display: block;}
    .ser3 .mark_process li .circle .txt{font-size: 14px;}
}

/* ser4 개별 적용 */
.ser4{}
@media screen and (max-width: 860px){
	.ser4.scroll_pin .right-content {width:100%; z-index:1;}
	.ser4.scroll_pin .right-content .img {float: none;}
}

/* 스크롤트리거 해제 (모바일) */
@media screen and (max-width: 860px){
    .scroll_pin .left-content > *{position: static; left: auto; right: auto; top: auto; opacity: 1 !important; visibility: visible !important; transform: none !important;}

    .scroll_pin{display: block; box-sizing: border-box;}
    .scroll_pin .left-content{width: 100%; height: auto; transform: none !important;}
    .scroll_pin .left-content .tit{margin: 0 0 10%;}
	.scroll_pin .left-content .tit#ser4_2 {display:none;}

    .scroll_pin .left-content .img_wrap:not(:last-child){margin: 0 0 20%;}
    .scroll_pin .left-content .img_wrap:after{content: ""; display: block; clear: both;}
    .scroll_pin .left-content .img_wrap .img{clear: both;}
    .scroll_pin .left-content .img_wrap .img:not(:last-child){margin: 0 0 8%;}
    .scroll_pin .left-content .img_wrap .img:nth-child(odd){float: left;}
    .scroll_pin .left-content .img_wrap .img:nth-child(even){float: right;}
    .scroll_pin .left-content .img_wrap .img .img_box{}
    .scroll_pin .left-content .img_wrap .img .img_box img{width: 100%;}
    .scroll_pin .left-content .img_wrap .img .txt{box-sizing: border-box; padding: 0 1vw 0 2vw; margin: -30px 0 0;}
    .scroll_pin .left-content .img_wrap .img .txt .title{}
    .scroll_pin .left-content .img_wrap .img .txt .title .eng{line-height: 108%; font-size: 7vw; font-family: 'Butler'; color: #222;}
    .scroll_pin .left-content .img_wrap .img .txt .title .kor{box-sizing: border-box; padding: 10px 0 6px; font-size: 22px; font-weight: 700;}
    .scroll_pin .left-content .img_wrap .img .txt .exp{}
    .scroll_pin .left-content .img_wrap .img .txt .exp .des{box-sizing: border-box; padding: 0 0 12px; font-size: 15px;}
    .scroll_pin .left-content .img_wrap .img .txt .exp .list{color: var(--point-color); font-size: 15px;}

    /*.scroll_pin .left-content .img_wrap img{clear: both;}*/
    /*.scroll_pin .left-content .img_wrap img:not(:last-child){margin: 0 0 30px;}*/
    /*.scroll_pin .left-content .img_wrap img:nth-child(odd){float: left;}*/
    /*.scroll_pin .left-content .img_wrap img:nth-child(even){float: right;}*/

    .ser2{}
    /*.ser2 .left-content .img_wrap img{width: 75%;}*/
    .ser2 .left-content .img_wrap .img{width: 75%;}

    .ser4{padding: 60px 0 0;}
    /*.ser4 .left-content .img_wrap img{width: 75%;}*/
    .ser4 .left-content .img_wrap .img{width: 75%;}
}
@media screen and (max-width: 860px){
    .ser2 .left-content .tit:nth-child(3) .des br{display: none;}
    .ser2 .left-content .tit:nth-child(7) .des br{display: none;}

    .ser4 .left-content .tit:nth-child(1) .des br{display: none;}
    .ser4 .left-content .tit:nth-child(3) .des br{display: none;}
}
@media screen and (max-width: 568px){
    .scroll_pin .left-content .img_wrap .img .txt{margin: -16px 0 0;}
    .scroll_pin .left-content .img_wrap .img .txt .title .eng{font-size: 8vw;}
    .scroll_pin .left-content .img_wrap .img .txt .title .kor{font-size: 19px; padding: 1% 0;}
    .scroll_pin .left-content .img_wrap .img .txt .exp .des{font-size: 14px; padding: 0 0 3%;}
    .scroll_pin .left-content .img_wrap .img .txt .exp .list{font-size: 14px;}
}























/********** 포트폴리오 리스트 **********/
.pf_wrap{min-height: 600px;}
.pf_wrap .wrap{position: relative; max-width: none; width: 92%; margin: 0 auto; box-sizing: border-box; padding: 0; overflow: visible;}
.pf_wrap .wrap:after{content: ""; display: block; clear: both;}

/* .pf_wrap .pf_tit{margin-top: 142px;} */
.pf_wrap .pf_tit p{font-size: 70px; font-weight: 700; line-height: 120%; letter-spacing: -0.03em; color: var(--black000);}
.pf_wrap .pf_tit:has(.marketing-text){margin-bottom: 80px;}

.pf_wrap .pf_top{margin: 80px 0 0;}
.pf_wrap .pf_top:after{content: ""; display: block; clear: both;}
.pf_wrap .pf_top .pf_sort{float: left; width: calc(100% - 585px); margin: 0 auto 47px;}
.pf_wrap .pf_top .pf_sort:after{content: ""; display: block; clear: both;}
.pf_wrap .pf_top .pf_sort > li{float: left; margin: 0 10px 10px 0;}
.pf_wrap .pf_top .pf_sort > li:last-child{margin-right: 0;}
.pf_wrap .pf_top .pf_sort > li a {
    display: block;
    font-size: 16px; font-weight:500; line-height: 45px;
    text-transform: capitalize; letter-spacing: 0.1px;
    border: 1px solid #dbdbdb; box-sizing: border-box;
    color: #666; padding: 0 25px;
    border-radius: 5px;
    background-color: #fff;
    background-image: linear-gradient(45deg, var(--point-color) 50%, transparent 50%);
    background-position: 99%;
    background-size: 400%;
    transition: all 0.5s ease-in-out;
}
.pf_wrap .pf_top .pf_sort > li a:hover {
    /*color: #fff;
    border-color: #fe4249;
    background-position: 0;*/
 }
.pf_wrap .pf_top .pf_sort > li a.on{color: #fff; /*background-color: #fe4249;*/ border-color: var(--point-color); background-position: 0;}

.pf_wrap .pf_top .sch_wrap{float: right;}
.pf_wrap .pf_top .sch_wrap:after{content: ""; display: block; clear: both;}
.pf_wrap .pf_top .sch_wrap .ip_box{float: left; position: relative; /*border-bottom: 1px solid #000;*/ border-bottom: 1px solid var(--black); box-sizing: border-box; padding: 0 47px 0 20px;}
.pf_wrap .pf_top .sch_wrap .ip_box:not(:first-child){margin-left: 10px;}

.pf_wrap .pf_top .sch_wrap .ip_box select,
.pf_wrap .pf_top .sch_wrap .ip_box input{border: none; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none !important; box-sizing: border-box; /*color: #222;*/ color: var(--black); line-height: 45px; font-size: 1em; outline: none;}
.pf_wrap .pf_top .sch_wrap .ip_box input{max-width: 97%;}
.pf_wrap .pf_top .sch_wrap .ip_box select{width: 103px; cursor: pointer;}
.pf_wrap .pf_top .sch_wrap .ip_box input[type="search"]::placeholder{color: var(--black) !important;}
.pf_wrap .pf_top .sch_wrap .ip_box .btn_ip{position: absolute; top: 50%; transform: translateY(-50%); right: 20px; font-size: 0; display: inline-block; vertical-align: middle; margin: 0; width: 27px; height: 26px;}
.pf_wrap .pf_top .sch_wrap .ip_box .btn_filter{background: url("/assets/site/img/board/btn_filter.png") no-repeat;}
.pf_wrap .pf_top .sch_wrap .ip_box .btn_sel{}
.pf_wrap .pf_top .sch_wrap .ip_box .btn_sch{background: url("/assets/site/img/board/btn_sch.png") no-repeat;}

/*
.pf_wrap .pf_top .sch_wrap .sel_box{float: left; position: relative; border-bottom: 1px solid var(--black); box-sizing: border-box; padding: 0 20px 0 20px;}
.pf_wrap .pf_top .sch_wrap .sel_box .btn_sel{display: block; width: 132px; font-size: 1em; line-height: 45px; box-sizing: border-box; padding: 0 50px 0 0; color: var(--black); background: url("/assets/site/img/board/btn_filter.png") no-repeat; background-position: top 50% right 0; outline: none; text-align: left;}
.pf_wrap .pf_top .sch_wrap .sel_box .sel_list{display: none; position: absolute; z-index: 3; top: 46px; left: 0; width: 100%; height: 300px !important; overflow-y: auto; box-sizing: border-box; border: 1px solid #000; border-top: none; background-color: rgba(255,255,255,0.9);}
.pf_wrap .pf_top .sch_wrap .sel_box.on .sel_list{}
.pf_wrap .pf_top .sch_wrap .sel_box .sel_list li{}
.pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a{display: block; box-sizing: border-box; padding: 0 20px; font-size: 1em; line-height: 40px; border-bottom: 1px solid #f5f5f5;}
.pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a:hover,
.pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a:focus{background-color: #f5f5f5;}
*/
.pf_wrap .pf_top .sch_wrap .sel_box{float: left; position: relative; box-sizing: border-box;}
.pf_wrap .pf_top .sch_wrap .sel_box select{float: left; position: relative; box-sizing: border-box; padding: 0 96px 0 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-bottom: 1px solid var(--black); font-size: 1em; line-height: 45px; background: #fff url("/assets/site/img/board/btn_filter.png") no-repeat right 20px top 50%; cursor: pointer;}
.pf_wrap .pf_top .sch_wrap .sel_box select option{}

.pf_wrap .pf_list{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(200px, auto)); grid-row-gap: 4.09vw; grid-column-gap: 2.09vw;}
.pf_wrap .pf_list:after{content: ""; display: block; clear: both;}
.pf_wrap .pf_list li > a{position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px,1.5vw,21px) ; overflow: hidden; transition: 0.3s !important;}
.pf_wrap .pf_list li > a .thumb{position: relative; /* flex: 1; */ overflow: hidden; aspect-ratio: 560 / 390;}
.pf_wrap .pf_list li > a .thumb img{width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
.pf_wrap .pf_list li > a:hover .thumb img{transform: scale(1.005); filter: blur(2px) brightness(0.85);}
/* 터치 디바이스일 경우 */
@media (hover: none) {
    /* 마우스오버 흐림 효과 없애기 */
    .pf_wrap .pf_list li > a:hover .thumb img{transform: scale(1); filter: initial;}
}
.pf_wrap .pf_list li > a .info{margin-top: auto; color: var(--black000);}
.pf_wrap .pf_list li > a .info dl{display: flex; flex-direction: column-reverse; gap: 4px; line-height: 1.2; font-size: 1.25rem; font-weight: 600;}
.pf_wrap .pf_list li > a .info dl dt{}
.pf_wrap .pf_list li > a .info dl dd{color: var(--gray); font-size: 13px;}
.pf_wrap .pf_list li > a .info dl dd div{text-transform: uppercase;}

.pf_wrap .btn_wrap{margin: 104px 0 0;}
.pf_wrap .btn_wrap .pf_more{position: relative; display: inline-block; width: 100px; height: 100px; margin: 0 -2px 0 0; background: transparent url("/assets/site/img/board/pf_more.png") no-repeat; font-size: 0; transition: transform 0.25s;}
.pf_wrap .btn_wrap .pf_more:hover,
.pf_wrap .btn_wrap .pf_more:focus{transform: rotate(90deg);}


.pf_wrap .pf_list_more{text-align: center; margin-top: 80px;}
.pf_wrap .pf_list_more a{display: inline-flex; justify-content: center; align-items: center; padding: 0 40px; height: 54px; font-size: 17px; font-weight: bold; color: #fff; background-color: var(--mine-shaft);}

@media screen and (max-width: 1540px){
    .pf_wrap .wrap{max-width: none; width: 92%;}

    .pf_wrap .pf_tit{}
    .pf_wrap .pf_tit p{font-size: 56px;}
    .pf_wrap .pf_top .pf_sort{width: calc(100% - 500px);}
}
@media screen and (max-width: 1280px){
    .pf_wrap .wrap{width: 93%;}

    .pf_wrap .pf_tit{/*margin-top: 40px;*/}
    .pf_wrap .pf_tit:has(.marketing-text){margin-bottom: 70px;}
    .pf_wrap .pf_tit p{font-size: 46px;}

    .pf_wrap .pf_top{margin: 70px 0 0;}
    .pf_wrap .pf_top .pf_sort{width: calc(100% - 410px);}
    .pf_wrap .pf_top .sch_wrap .sel_box select{padding: 0 68px 0 20px;}

    .pf_wrap .pf_top .sch_wrap .ip_box select{width: 83px;}
    .pf_wrap .pf_top .sch_wrap .ip_box input[type="search"]{width: 170px;}

    .pf_wrap .pf_list{grid-template-columns: repeat(2, 1fr); grid-row-gap: 40px;}
    .pf_wrap .pf_list > li a .pf_item{padding: 25px;}
	.pf_wrap .pf_list > li a .pf_basic .name{}
	.pf_wrap .pf_list > li a .pf_basic .client{}
}
@media screen and (max-width: 1024px){
    .pf_wrap .pf_top .pf_sort{float: none; width: 100%; margin: 0;}
    .pf_wrap .pf_top .pf_sort > li a{padding: 0 20px; line-height: 40px; font-size: 16px;}
    .pf_wrap .pf_top .sch_wrap{float: none; width: 100%; margin: 20px 0 30px;}
    .pf_wrap .pf_top .sch_wrap .sel_box{width: 30%;}
    /*.pf_wrap .pf_top .sch_wrap .sel_box .btn_sel{width: 100%; font-size: 15px; line-height: 40px;}
    .pf_wrap .pf_top .sch_wrap .sel_box .sel_list{top: 41px;}
    .pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a{font-size: 16px;}*/
    .pf_wrap .pf_top .sch_wrap .sel_box select{width: 100%; line-height: 40px;}
    .pf_wrap .pf_top .sch_wrap .ip_box:not(:first-child){width: calc(70% - 10px);}
    .pf_wrap .pf_top .sch_wrap .ip_box select,
    .pf_wrap .pf_top .sch_wrap .ip_box input{font-size: 16px; line-height: 40px;}

	.pf_wrap .pf_list > li a .pf_basic .name{font-size: 0.8rem;}
	.pf_wrap .pf_list > li a .pf_basic .name .big{font-size: 1.5rem; margin-top: 5px;}
	.pf_wrap .pf_list > li a .pf_basic .client{font-size: 0.9rem;}
    .pf_wrap .btn_wrap .pf_more{background-size: contain; width: 86px; height: 86px;}
}
@media screen and (max-width: 860px){
    .pf_wrap .pf_list{grid-template-columns: repeat(1, 1fr);}
}
@media screen and (max-width: 768px){
    .pf_wrap .pf_list > li a .pf_item{padding: 20px;}
	.pf_wrap .pf_list > li a .pf_basic .name{font-size:0.75rem;}
	.pf_wrap .pf_list > li a .pf_basic .name .big{font-size: 1.25rem;}
	.pf_wrap .pf_list > li a .pf_basic .client{font-size: 0.85rem;}
}
@media screen and (max-width: 640px){
    .pf_wrap .pf_tit:has(.marketing-text){margin-bottom: 8%;}
    .pf_wrap .pf_top{margin: 8% 0 0;}
    .pf_wrap .pf_top .pf_sort > li{margin: 0 6px 6px 0;}
    .pf_wrap .pf_top .pf_sort > li a{padding: 0 15px; line-height: 36px; font-size: 14px;}

    /*.pf_wrap .pf_top .sch_wrap .sel_box{width: 105px; padding: 0 10px;}
    .pf_wrap .pf_top .sch_wrap .sel_box .btn_sel{font-size: 14px; line-height: 36px; background-size: 20px; padding: 0 35px 0 0;}
    .pf_wrap .pf_top .sch_wrap .sel_box .sel_list{top: 37px; height: 200px !important;}
    .pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a{font-size: 14px; line-height: 32px;}*/
    .pf_wrap .pf_top .sch_wrap .sel_box{width: 105px;}
    .pf_wrap .pf_top .sch_wrap .sel_box select{line-height: 36px; padding: 0 31px 0 10px; background-size: 20px; background-position: top 50% right 10px;}

    .pf_wrap .pf_top .sch_wrap .ip_box{padding: 0 35px 0 10px;}
    .pf_wrap .pf_top .sch_wrap .ip_box:not(:first-child){width: calc(100% - 105px - 10px);}
    .pf_wrap .pf_top .sch_wrap .ip_box select,
    .pf_wrap .pf_top .sch_wrap .ip_box input{font-size: 14px; line-height: 36px;}
    .pf_wrap .pf_top .sch_wrap .ip_box .btn_ip{background-size: contain; width: 20px; height: 19px; right: 10px;}
    .pf_wrap .pf_top .sch_wrap .ip_box select{width: auto; padding: 0 5px 0 0;}
    .pf_wrap .pf_top .sch_wrap .ip_box input[type="search"]{width: 135px;}


    .pf_wrap .btn_wrap{margin: 10% 0 0;}
    .pf_wrap .btn_wrap .pf_more{width: 12vw; height: 12vw;}
    .pf_wrap .pf_list_more{margin-top: 60px;}
    .pf_wrap .pf_list_more a{padding: 0 34px; height: 50px; font-size: 16px;}

    .pf_wrap .pf_tit p{font-size: 26px;}
}
@media screen and (max-width: 480px){


    .pf_wrap .pf_top .sch_wrap .sel_box .sel_list{height: 148px !important;}

}



/********** 포트폴리오 상세 **********/
footer.on{position: relative; background-color: rgb(255, 255, 255); z-index: 1;}

.pf_view_wrap{
    margin: -120px 0 0;
    padding: 0 0 70px;
}
.pf_view_wrap .wrap{
    /* max-width: 1450px;  */
    /* margin: 0 auto; */
    /* box-sizing: border-box; */
}
.pf_view_wrap .wrap:after{
    content: ""; display: block; clear: both;
}
.pf_view_wrap .wrap p:nth-child(1){
    position: relative;
    padding: 54.687% 0 0;
    overflow: hidden;
}
.pf_view_wrap .wrap p:nth-child(1) > iframe{
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

.pf_view_wrap .pf_img{
    position: fixed; top: 0; left: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
    /*background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;*/
}
.pf_view_wrap .pf_img::after {
    content: ''; display: block;
    width: 100%; height: 100vh;
    background: rgba(0,0,0,.05);
    position: absolute;
    top: 0; bottom: 0;
}
.pf_view_wrap .pf_img .youtubevideowrapper{
  height: 100%;
}
.pf_view_wrap .pf_img .youtubevideowrapperdiv{
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
.pf_view_wrap .pf_img .youtubevideowrapperdiv iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) {
  .pf_view_wrap .pf_img .youtubevideowrapperdiv iframe {
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .pf_view_wrap .pf_img .youtubevideowrapperdiv iframe {
    width: 177.78vh;
  }
}

.pf_view_wrap .pf_img img{
    object-fit: cover; width: 100%; height: 100%;
}
.pf_view_wrap .pf_img .scroll-down {
    position: absolute;
    left: 50%; bottom: 60px;
    transform: translateX(-50%);
    z-index: 1;
}
.pf_view_wrap .pf_img .scroll-down p {
    color: #fff; text-align: center;
    text-transform: uppercase; font-weight: 600;
    letter-spacing: 2px;
    font-size: 13px;
}
.pf_view_wrap .pf_img .scroll-down .arr {
    width: 10px; height: 10px;
    margin: 3px auto 0;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;

    animation: roof 1.5s infinite;
    -webkit-animation: roof 1.5s infinite;
    -moz-animation: roof 1.5s infinite;
    -o-animation: roof 1.5s infinite;

    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.pf_view_wrap .pf_img .scroll-down .arr-02 {

}

@keyframes roof {
    from {
        opacity:0;
        -moz-transform: translate(0, 0) rotate(-45deg);
        -webkit-transform: translate(0, 0) rotate(-45deg);
        -o-transform: translate(0, 0) rotate(-45deg);
        transform: translate(0, 0) rotate(-45deg);
        }
    to {
        opacity:1;
        -moz-transform: translate(0, 10px) rotate(-45deg);
        -webkit-transform: translate(0, 10px) rotate(-45deg);
        -o-transform: translate(0, 10px) rotate(-45deg);
        transform: translate(0, 10px) rotate(-45deg);
        }
}





.pf_view_wrap .pf_info{
    position: relative;
    margin-top: 100vh;
    box-sizing: border-box; padding: 100px 0;
    background-color: #fff;
}
.pf_view_wrap .pf_info .wrap {
    background: #fff;
}
.pf_view_wrap .pf_info:after{
    content: ""; display: block; clear: both;
}
.pf_view_wrap .pf_info .basic{
    float: left; /*width: calc(100% - 850px);*/ width: 41.38%;
    box-sizing: border-box; padding: 0 30px 0 0;
}
.pf_view_wrap .pf_info .basic .name{
    line-height: 120%;
    font-size: 45px; font-weight: 600; color: #222;
}
.pf_view_wrap .pf_info .basic > ul{
    box-sizing: border-box; padding: 20px 0 40px;
}
.pf_view_wrap .pf_info .basic > ul:after{
    content: ""; display: block; clear: both;
}
.pf_view_wrap .pf_info .basic > ul li{
    /* display: flex; */
    /* float: left; */
    margin: 0 0 10px 0;
}
.pf_view_wrap .pf_info .basic > ul li .tit{
    /* display: inline-block; vertical-align: middle; */
    float: left; width: 100px;
    font-weight: 700; color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pf_view_wrap .pf_info .basic > ul li em{
    /* display: inline-block; vertical-align: middle; */
    margin: 0 0 0 12px;
    width: calc(100% - 100px);
    color: #888;
}
.pf_view_wrap .pf_info .basic .pf_link{
    display: inline-block; line-height: 60px;
    box-sizing: border-box; padding: 0 54px;
    background-color: #000; color: #fff;
    transition: all .2s linear;
}
.pf_view_wrap .pf_info .basic .pf_link span{

}
.pf_view_wrap .pf_info .basic .pf_link span:after{
    content: ""; display: inline-block; vertical-align: middle; margin: -3px 0 0 18px;
    width: 17px; height: 16px;
    background: url("/assets/site/img/board/pf_link.png") no-repeat;
}

.pf_view_wrap .pf_info .overview{
    float: right; /*width: 850px;*/ width: 58.620%;
}
.pf_view_wrap .pf_info .overview .tit{
    position: relative;
    font-weight: 700; letter-spacing: 0.5px;
    color: #000;
    box-sizing: border-box;
    padding: 0 0 20px 0;
}
.pf_view_wrap .pf_info .overview .tit::after {
    content: ''; display: block;
    position: absolute;
    top: 12px; right: 0;
    width: calc(100% - 125px); height: 1px;
    background: #000;
}
.pf_view_wrap .pf_info .overview > p {
    box-sizing: border-box;
    /* padding: 15px 0 0; */
    color: #222;
}

.pf_view_wrap .pf_detail{
    position: relative;
    background-color: #fff;
    min-height: 100px;
}
.pf_view_wrap .pf_detail .wrap {
    background: #fff;
    max-width: 100%; padding: 0; margin: 0;
    text-align: center;
}
.pf_view_wrap .pf_detail .wrap img{
    /* width: 100%; */
}

/* 포트폴리오 리스트 돌아가기 버튼 */
.pf_toolbar_wrap.fixed{position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1; transform: translateY(100%); transition: ease 0.2s;}
.pf_toolbar_wrap.fixed.on{transform: translateY(0);}
.pf_toolbar_wrap{position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; background-color: #222; /*opacity: 0; transition: 1s cubic-bezier(0.77,0,0.18,1);*/}
.pf_toolbar_wrap .pf_toolbar{/*opacity: 1; bottom: 3%;*/ display: flex;}
.pf_toolbar_wrap .pf_toolbar > li{position: relative; z-index: 2; border-left: 1px solid #444;}
.pf_toolbar_wrap .pf_toolbar > li:nth-last-child(2){border-right: 1px solid #444;}
.pf_toolbar_wrap .pf_toolbar > li:last-child{border-right: 1px solid #444; margin-left: auto;}
.pf_toolbar_wrap .pf_toolbar > li a{display: block; padding: 1.4rem 2rem; box-sizing: border-box; font-size: 1rem; font-weight: 400; text-transform: uppercase; color: #fff; text-align: center;}
.pf_toolbar_wrap .pf_toolbar > li a.move_prev:before{content: ""; display: inline-block; vertical-align: middle; margin: -3.5px 4px 0 0; width: 13px; height: 13px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg);}
.pf_toolbar_wrap .pf_toolbar > li a.move_next:after{content: ""; display: inline-block; vertical-align: middle; margin: -3.5px 0 0 4px; width: 13px; height: 13px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.pf_toolbar_wrap .pf_toolbar > li a.back_list_btn{}
.pf_toolbar_wrap .pf_toolbar > li a.back_list_btn .ico_list{display: inline-flex; flex-direction: column; justify-content: space-between; vertical-align: middle; margin: -3.5px 8px 0 0; width: 15px; height: 16px;}
.pf_toolbar_wrap .pf_toolbar > li a.back_list_btn .ico_list b{width: 100%; height: 2px; background-color: #fff;}
.pf_toolbar_wrap .pf_toolbar > li a.back_list_btn span{}
.pf_toolbar_wrap .pf_toolbar > li a.pf_link{}
.pf_toolbar_wrap .pf_toolbar > li a.pf_link span{}
.pf_toolbar_wrap .pf_toolbar > li a.pf_link span:after{content: ""; display: inline-block; vertical-align: middle; margin: -3.5px 0 0 12px; width: 17px; height: 16px; background: url(/assets/site/img/board/pf_link.png) no-repeat;}
@media screen and (max-width: 1540px){
    /* .pf_view_wrap .wrap{width: 100%; padding: 0 2.5%;} */
}
@media screen and (max-width: 1280px){
    .pf_view_wrap {margin: -80px 0 0; padding: 0 0 61px;}
    .pf_view_wrap .pf_info{padding: 60px 0;}
    .pf_view_wrap .pf_info .basic{/*width: calc(100% - 800px);*/ width: 35%; padding: 0 20px 0 0;}
    .pf_view_wrap .pf_info .basic .name{font-size: 36px;}
    .pf_view_wrap .pf_info .basic > ul{padding: 20px 0 40px;}
    .pf_view_wrap .pf_info .basic > ul li{float: none; display: block; margin: 0 0 10px 0; overflow: hidden;}
    .pf_view_wrap .pf_info .basic > ul li .tit{float: left; width: 100px;}
    /* .pf_view_wrap .pf_info .basic > ul li em{float: left; display: block; width: calc(100% - 50px); margin: 0 0 10px 0; box-sizing: border-box; padding: 0 0 0 12px;} */
    .pf_view_wrap .pf_info .basic > ul li em{width: calc(100% - 100px); margin: 0;}
    .pf_view_wrap .pf_info .basic .pf_link{line-height: 54px;}

    /* .pf_view_wrap .pf_info .overview{ width: 65%;}
    .pf_view_wrap .pf_info .overview .lc{display: none;} */

    .pf_view_wrap .pf_info .basic{float: none; position: relative; width: 100%; padding: 0 180px 0 0;}
    .pf_view_wrap .pf_info .basic .name{font-size: 35px;}
    .pf_view_wrap .pf_info .basic > ul{padding: 20px 0 0;}
    .pf_view_wrap .pf_info .basic .pf_link{position: absolute; top: 0; right: 0; padding: 0 30px; line-height: 50px;}
    .pf_view_wrap .pf_info .basic .pf_link span:after{margin: -3px 0 0 12px;}

    .pf_view_wrap .pf_info .overview{float: none; width: 100%; margin: 60px 0 0;}
    .pf_view_wrap .pf_info .overview .tit{padding: 0 0 20px; border-bottom: 0; position: relative;}
    /* .pf_view_wrap .pf_info .overview .tit::after {content: ''; display: block; width: calc(100% - 125px); height: 1px; background: #000; position: absolute; top: 12px; right: 0;} */


    /* .pf_view_wrap .pf_info .overview > p{padding: 20px 0 0;} */

    .pf_toolbar_wrap .pf_toolbar > li a{padding: 1.25rem 1.75rem;}

}
@media screen and (max-width: 1024px){
    .pf_view_wrap .pf_img .scroll_hint{
        font-size: 12px;
        padding: 0 0 19px;
    }
    .pf_view_wrap .pf_img .scroll_hint:before{
        width: 30px; height: 11px;
        background-size: contain;
    }
}
@media screen and (max-width: 860px){
    .pf_view_wrap {
        margin: -70px 0 0;
    }
    .pf_view_wrap .pf_info .basic .pf_link {
        position: static;
        margin: 20px 0 0; padding: 0 20px;
    }
    .pf_view_wrap .pf_info .basic .pf_link span:after {
        background-size: contain;
        width: 13px; height: 12px;
        margin: -3px 0 0 10px;
    }
}
@media screen and (max-width: 768px){

}

@media screen and (max-width: 640px) {
    .pf_view_wrap {padding: 0 0 50px;}

    .pf_view_wrap .pf_img .scroll_hint {font-size: 10px; padding: 0 0 14px; }
    .pf_view_wrap .pf_img .scroll_hint:before {width: 22px; height: 8px;}

    .pf_view_wrap .pf_info .basic {padding: 0;}
    .pf_view_wrap .pf_info .basic .name {font-size: 25px;}
    .pf_view_wrap .pf_info .basic .pf_link {width: 100%; text-align: center;}

    .pf_view_wrap .pf_info .overview .tit::after {width: calc( 100% - 100px);}

    /* .pf_view_wrap .pf_info .overview {margin: 30px 0 0;} */

    .pf_toolbar_wrap .pf_toolbar > li a{padding: 1rem 1rem;}
    .pf_toolbar_wrap .pf_toolbar > li a.move_prev:before{margin: -3px 1px 0 0; width: 8px; height: 8px;}
    .pf_toolbar_wrap .pf_toolbar > li a.move_next:after{margin: -3px 0 0 1px; width: 8px; height: 8px;}
    .pf_toolbar_wrap .pf_toolbar > li a.back_list_btn .ico_list{width: 13px; height: 14px; margin: -3px -2px 0 0;}
    .pf_toolbar_wrap .pf_toolbar > li a.pf_link span:after{background-size: contain; width: 14px; height: 12px; margin: -3px 0 0 9px;}
    .pf_toolbar_wrap .pf_toolbar > li a .text{font-size: 0;}
    .pf_toolbar_wrap .pf_toolbar > li a.move_prev:before{margin: -3px -2px 0 4px;}
    .pf_toolbar_wrap .pf_toolbar > li a.move_next:after{margin: -3px 4px 0 -2px;}
}
@media screen and (max-width: 500px){
    .pf_view_wrap{margin: -150px 0 0;}
    .pf_view_wrap .pf_img{height: 50vh; overflow: hidden;}
    .pf_view_wrap .pf_info{margin-top: 50vh; }
}
@keyframes scroll {
    0%   {transform: translate(-50%, 0);}
    50%  {transform: translate(-50%, -15%);}
    100% {transform: translate(-50%, 0px);}
}













/* 개인정보처리방침 팝업 레이어 사이즈 조정 */
.privacy-layer {

}
.privacy-layer .layer-con {
    overflow: hidden;
    height: calc(100% - 65px);
    margin: 30px 0 0 0;
    overflow-y: auto!important;
    padding-right: 10px;
}
.privacy-layer .layer-con::-webkit-scrollbar{width: 7px;}
.privacy-layer .layer-con::-webkit-scrollbar-thumb{ background-color: #aaaaaa; border-radius: 8px;}
.privacy-layer .layer-con::-webkit-scrollbar-track{ background-color: #fff;}
html[data-dark=true]  .privacy-layer .layer-con::-webkit-scrollbar-track{ background-color: #444;}
.privacy-con {
}
.privacy-con h6 {
    font-size: 20px; font-weight: 700;
    margin: 20px 0 8px 0;
}
@media screen and (max-width: 860px) {
    .privacy-layer {
        width: 70% !important;
        padding: 35px 25px !important;
    }
    .privacy .close {
        /*right: 57%;*/
        top: 12.3%; right: auto; left: 50%;
        margin: 0 0 0 31%;
        width: 30px; height: 30px;
    }
    .privacy .close span{
        width: 25px;
    }

    .privacy-layer .layer-con {
        margin: 20px 0 0 0;
    }

}
@media screen and (max-width: 568px) {
    .popup .popup-layer-wrap h5 {
        font-size: 22px;
    }
    .privacy-con h6 {
        font-size: 16px;
        margin: 15px 0 5px 0;
    }
}


/*
.process-container{float: right; display: block; position: relative; width: 555px; height: 95px; margin: 59px 0 0; background: #e6e6e6; border-radius: 50px; overflow: hidden; }
.process-container .process-bar{display: block; position: absolute; width: 0; height: 100%; top: 0; left: 0; background: rgb(160,255,190); background: linear-gradient(127deg, rgba(160,255,190,1) 0%, rgba(119,226,207,1) 39%, rgba(9,148,250,1) 100%);}
.process-container .counter-count{font-family: 'Akzidenz-Grotesk BQ'; font-size: 60px; color: #fff; position: absolute; top: 50%; right: 14.5%; transform: translateY(-50%);}
.process-container .counter-count.on{animation: textw 2.5s forwards;}
.process-container .counter-count .unit{font-size: 40px;} */






/*2022 09 21*/
.pf_view_wrap .pf_detail_txt {
    background: #fff;
    position: relative;
}


/*메인임시테스트*/
/*
.section-01 .title-02 em{
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: none;
    -webkit-text-fill-color: initial;
}
.section-01 .title-02 em span{
    display: inline-block; line-height: 100%;
    background: linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(255,0,0,1) 70%, rgba(255,0,0,1) 100%);
    -webkit-background-clip: text;
    color: transparent;
}
*/



.ser .scroll-down,
.about .scroll-down {
    position: absolute;
    left: 50%; bottom: 60px;
    transform: translateX(-50%);
    z-index: 1;
}
.ser .scroll-down p,
.about .scroll-down p {
    color: var(--black); text-align: center;
    text-transform: uppercase; font-weight: 600;
    letter-spacing: 2px;
    font-size: 13px;
}
.ser .scroll-down .arr,
.about .scroll-down .arr {
    width: 10px; height: 10px;
    margin: 3px auto 0;
    border-left: 3px solid var(--black);
    border-bottom: 3px solid var(--black);

    animation: roof 1.5s infinite;
    -webkit-animation: roof 1.5s infinite;
    -moz-animation: roof 1.5s infinite;
    -o-animation: roof 1.5s infinite;

    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}



/* 문의하기 필수사항 표시 */
.essential_guide{
    position: absolute; top: 1rem; right: 18px;
    color: #cc0000; font-weight: 600;
    /* padding-left: 17px !important; */
}
.essential_guide::before{
    content: ''; display: block; width: 10px; height: 10px; border-radius: 50%;
    background-color: #cc0000;
    position: absolute; left: calc(100% + 7px); top: 0;
}
.essential{
    position: relative; display: inline-flex;
}
.essential::after{
    content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #cc0000;
    position: absolute; left: calc(100% + 5px); top: 0;
}
.essential.big::after{
    width: 10px; height: 10px;
    position: absolute; left: calc(100% + 7px); top: 3px;
}

@media (max-width: 560px) {
    .essential_guide::before{
        width: 8px; height: 8px;
        left: calc(100% + 5px);
    }
    .essential::after{
        width: 5px; height: 5px;
        left: calc(100% + 4px); top: 2px;
    }
    .essential.big::after{
        width: 8px; height: 8px;
        left: calc(100% + 5px);  top: 2px;
    }
}












/********** About renewal 2025 11 18 **********/

/* about01 */
.about01 {padding: 0 0 200px 0;}
.about01 .wrap {display: flex; flex-direction: column;}
.about01 .about_item {display: flex; justify-content: space-between; gap: 60px;}
.about01 .about_item .image {/*border: 1px solid red; box-sizing: border-box;*/}

.about .desc {display: flex; flex-direction: column; /*background: pink;*/}
.about .desc .tit {font-size: 35px; font-weight: 700; line-height: 130%; letter-spacing: -2px;}
.about .desc {}
.about .desc h1 {font-size: 150px; letter-spacing: -2px; line-height: 53%;}
.about .desc h1 span {}
.about .desc .txt {font-size: 18px;}

.about01 .about_item {}
.about01 .about_item::before {content: ''; z-index: -1; width: 100px; height: 100px; border-radius: 50%; border: 1px dashed #888888; position: absolute;}

.about01 .about_item.item1 {position: relative;}
.about01 .about_item.item1::before {top: 38px; left: 50%; transform: translateX(-50%); width: 1258px; height: 1258px; margin-left: 78px;}
.about01 .about_item.item1 .image {width: 42.570%;}
.about01 .about_item.item1 .desc {flex: 1;}
.about01 .about_item.item1 .desc h1 {margin-top: 220px;}
.about01 .about_item.item1 .desc h1 span {color: var(--light-gray);}
.about01 .about_item.item1 .desc .txt {margin-top: 60px;}

.about01 .about_item.item2 {position: relative; margin-top: 150px;}
.about01 .about_item.item2::before {top: 100px; left: -12%; width: 1017px; height: 1017px;}
.about01 .about_item.item2 .image {order: 1; flex: 1; display: flex; flex-direction: row; position: relative; margin-top: 180px; position: relative;}
.about01 .about_item.item2 .image img {width: 380px; height: auto; aspect-ratio: 572 / 750;}
.about01 .about_item.item2 .image img:nth-of-type(2) {position: absolute; top: 110px; left: 110px;}
.about01 .about_item.item2 .desc {order: 2; width: 42.570%; display: flex; flex-direction: column; gap: 30px;}
.about01 .about_item.item2 .desc h1 {margin: 30px 0;}
.about01 .about_item.item2 .desc h1 span {color: #1C69FF;}

.about01 .about_item.item3 {position: relative; margin-top: -70px;}
.about01 .about_item.item3::before {top: 130px; left: 50%; transform: translateX(-50%); width: 1335px; height: 1335px; margin-left: 95px;}
.about01 .about_item.item3 .image {width: 42.570%; display: flex; flex-direction: column; gap: 20px;}
.about01 .about_item.item3 .image img {width: 380px; height: fit-content;}
.about01 .about_item.item3 .desc {flex: 1; justify-content: flex-end; align-items: flex-end; gap: 30px; height: 757px;}
.about01 .about_item.item3 .desc > * {width: 480px;}


/* about02 */
.about02{padding: 90px 0; color: #000; position: relative; z-index: 3; width: 100%; /*height: auto;*/ box-sizing: border-box; background: #f9f9f9 url("/assets/site/img/contents/about_06.png") no-repeat center right; background-size: cover; background-attachment: fixed;}
.about02 .wrap {width: 100%; padding: 0 0 0 28%;}
.about02 .desc {gap: 50px;}
.about02 .desc h1 {color: #d7d7d7;}
.about02 .desc h1 span {color: #000;}

.about02 ul {display: flex; flex-direction: column; gap: 7px; font-size: 18px; text-transform: uppercase;}
.about02 ul li {}

@media screen and (max-width: 1680px){
    .about .desc .tit {font-size: 30px;}
    .about .desc h1 {font-size: 100px;}
    .about .desc .txt {font-size: 1rem;}
    .about .desc .txt br {display: none;}

    .about01 .about_item.item1::before {width: 1000px; height: 1000px;}
    .about01 .about_item.item1 .desc h1 {margin-top: 100px;}
    .about01 .about_item.item1 .desc .txt {margin-top: 40px;}

    .about01 .about_item.item2::before {width: 700px; height: 700px; top: 5%; left: -10%;}
    .about01 .about_item.item2 .image {margin-top: 100px;}
    .about01 .about_item.item2 .image img {width: 50%;}
    .about01 .about_item.item2 .image img:nth-of-type(2) {top: 20%; left: 15%;}

    .about01 .about_item.item3::before {width: 1000px; height: 1000px; top: 30px;}
    .about01 .about_item.item3 .image {}
    .about01 .about_item.item3 .image img {width: 60%;}
    .about01 .about_item.item3 .desc {height: auto;}

    .about02 .wrap {padding: 0 0 0 19%;}
    .about02 ul {font-size: 1rem;}
}
@media screen and (max-width: 1280px){
    .about .desc .tit {font-size: 22px;}
    .about .desc h1 {font-size: 80px; line-height: 60%;}

    .about01 .about_item.item1 .desc h1 {margin-top: 70px;}

    .about01 .about_item.item2 .desc {gap: 20px;}
    .about01 .about_item.item2 .desc h1 {margin: 20px 0;}
    .about01 .about_item.item2 .image img {height: auto;}

    .about01 .about_item.item3 {margin-top: 0;}
    .about01 .about_item.item3 .image img {height: auto;}

    .about02 .wrap {padding: 0; width: 93%;}
    .about02 ul {gap: 3px;}

}
@media screen and (max-width: 1080px){

}
@media screen and (max-width: 860px){
    .about .wrap::after {content: none;}
    .about .desc {gap: 20px;}
    .about .desc .tit br {display: none;}

    .about01 {padding: 0 0 150px 0;}
    .about01 .wrap {gap: 150px;}
    .about01 .about_item.item1::before {content: none;}
    .about01 .about_item {flex-direction: column; gap: 40px;}
    .about01 .about_item.item1 .desc {order: 2;}
    .about01 .about_item.item1 .desc h1 {margin: 0 0 10px 0;}
    .about01 .about_item.item1 .desc .txt {margin-top: 0;}
    .about01 .about_item.item1 .image {order: 1; width: 100%;}

    .about01 .about_item.item2 {margin-top: 0;}
    .about01 .about_item.item2::before {content: none;}
    .about01 .about_item.item2 .image {gap: 20px; margin: 0;}
    .about01 .about_item.item2 .image img {width: calc((100% - 20px) / 2);}
    .about01 .about_item.item2 .image img:nth-of-type(2) {top: auto; left: auto; position: relative;}
    .about01 .about_item.item2 .desc {width: 100%; gap: 10px;}
    .about01 .about_item.item2 .desc .tit {order: 1;}
    .about01 .about_item.item2 .desc h1 {order: 2; margin: 10px 0 15px 0;}
    .about01 .about_item.item2 .desc .txt:nth-of-type(2) {order: 3;}
    .about01 .about_item.item2 .desc .txt:last-of-type {order: 4;}

    .about01 .about_item.item3 {}
    .about01 .about_item.item3::before {content: none;}
    .about01 .about_item.item3 .image {order: 1; width: 100%; gap: 20px; flex-direction: row;}
    .about01 .about_item.item3 .image img {width: calc((100% - 20px) / 2);}
    .about01 .about_item.item3 .desc {order: 2; gap: 20px;}
    .about01 .about_item.item3 .desc > * {width: 100%;}

    .about02 {background: #f9f9f9 url("/assets/site/img/contents/about_06.png") no-repeat center right 20%;}
}
@media screen and (max-width: 568px){
    .about .desc {gap: 10px;}
    .about .desc .tit {font-size: 18px;}
    .about .desc h1 {font-size: 50px;}

    .about01 .wrap {gap: 100px;}
    .about01 .about_item {gap: 25px;}

    .about01 .about_item.item2 .image {gap: 10px;}
    .about01 .about_item.item2 .image img {width: calc((100% - 10px) / 2);}

    .about01 .about_item.item3 .image {gap: 10px;}
    .about01 .about_item.item3 .image img {width: calc((100% - 10px) / 2);}
    .about01 .about_item.item3 .desc {gap: 10px;}
    .about01 .about_item.item2 .desc h1 {order: 2; margin: 0 0 15px 0;}

    .about02 {padding: 70px 0; background: #f9f9f9 url("/assets/site/img/contents/about_06.png") no-repeat center right 20%;}
    .about02 .desc h1 {margin: 0 0 10px 0;}

}
@media screen and (max-width: 425px){
    .about02 {background: var(--color-gray-100); color: var(--black2);}
    .about02 .desc h1 {color: var(--light-gray);}
    .about02 .desc h1 span {color: var(--black2);}

}

@media (hover: none) and (pointer: coarse) {
 /* 터치 기기 전용 스타일 */
 .about02 {background-attachment: inherit;}


}

@media (hover: hover) and (pointer: fine) {
/* 터치 디스플레이가 아닌 기기에서만 적용 */

}




















/********** Service renewal 2025 11 18 **********/
.service_wrap {display: flex; flex-direction: column; gap: 300px;}
.service {font-size: 18px;}
.service .wrap {display: flex; gap: 60px; justify-content: space-between;}
.service .left {}
.service .right {}
.service .tit {font-size: 45px; font-weight: 300; line-height: 130%; letter-spacing: -2px;}
.service .tit span {display: block; font-weight: 600;}
.service .info .sub {font-size: 70px; font-weight: 700; letter-spacing: -1.2px;}
.service .info ul li .desc .d_tit {font-size: 30px; font-weight: 700;}
.service .info ul li .desc .d_txt {min-height: 120px; letter-spacing: -0.5px;}


.service01 .wrap {flex-direction: column;}
.service01 .wrap::after{content: none;}
.service01 .left {position: relative;}
.service01 .left h1 {position: absolute; top: 0; right: 0; text-align: right; font-size: 150px; letter-spacing: -2px; line-height: 53%;}
.service01 .left h1 span {color: var(--light-gray); margin-right: 77px;}

/* .service01 h1 {position: absolute; top: 0; right: 0; text-align: right; font-size: 150px; letter-spacing: -2px; line-height: 53%;}
.service01 h1 span {color: #dbdbdb; margin-right: 77px;} */

.service01 .info ul {margin-top: 40px; display: flex; flex-wrap: wrap; gap: 50px; justify-content: space-between;}
.service01 .info ul li {width: 25%; max-width: 350px;}
.service01 .info ul li .desc {}

.service02 {position: relative;}
.service02::before {content: ''; width: 655px; height: 815px; background: #f9f9f9 url("/assets/site/img/contents/service_09.png") no-repeat center center; background-size: cover; display: block; position: absolute; right: 0; top: 0;}
.service02 .wrap::after{content: none;}
.service02 .left {width: 63%;}
.service02 .left {display: flex; flex-direction: column; gap: 60px;}
.service02 .left .info ul {margin-top: 40px; display: flex; flex-wrap: wrap; gap: 40px;}
.service02 .left .info ul li {width: calc((100% - 40px) / 2);}




.service03 .wrap {flex-direction: column; gap: 300px;}
.service03 .wrap::after{content: none;}
.service03 .item {display: flex; justify-content: space-between; gap: 120px; width: 100%; align-items: center;}
.service03 .item .left {flex: 1; display: flex; flex-direction: column; gap: 60px;}
.service03 .left .info ul {margin-top: 20px;}
.service03 .item .right {width: 1000px;}

.service03 .item01 .left {order: 2;}
.service03 .item01 .right {order: 1;}



.service04 {background: var(--color-gray-100); padding: 150px 0;}
.service04 .wrap::after {content: none;}
.service04 .left {order: 2; flex: 1; display: flex; flex-direction: column; gap: 60px;}
.service04 .right {order: 1; width: 1200px;}
.service04 .right ul {display: flex; flex-wrap: wrap; gap: 50px;}
.service04 .right ul li {display: flex; flex-direction: column; align-items: center; gap: 20px; width: calc((100% - 300px) / 7); color: var(--black2);}
.service04 .right ul li p {font-weight: 700; font-size: 18px; text-align: center;}
.service04 .right ul li .ico {width: 40px; height: 40px; background-position: center center; background-repeat: no-repeat; }
.service04 .right ul li .ico01 {background-image: url('/assets/site/img/contents/service_ico_01.svg');}
.service04 .right ul li .ico02 {background-image: url('/assets/site/img/contents/service_ico_02.svg');}
.service04 .right ul li .ico03 {background-image: url('/assets/site/img/contents/service_ico_03.svg');}
.service04 .right ul li .ico04 {background-image: url('/assets/site/img/contents/service_ico_04.svg');}
.service04 .right ul li .ico05 {background-image: url('/assets/site/img/contents/service_ico_05.svg');}
.service04 .right ul li .ico06 {background-image: url('/assets/site/img/contents/service_ico_06.svg');}
.service04 .right ul li .ico07 {background-image: url('/assets/site/img/contents/service_ico_07.svg');}
.service04 .right ul li .ico08 {background-image: url('/assets/site/img/contents/service_ico_08.svg');}
.service04 .right ul li .ico09 {background-image: url('/assets/site/img/contents/service_ico_09.svg');}
.service04 .right ul li .ico10 {background-image: url('/assets/site/img/contents/service_ico_10.svg');}
.service04 .right ul li .ico11 {background-image: url('/assets/site/img/contents/service_ico_11.svg');}
.service04 .right ul li .ico12 {background-image: url('/assets/site/img/contents/service_ico_12.svg');}
.service04 .right ul li .ico13 {background-image: url('/assets/site/img/contents/service_ico_13.svg');}
.service04 .right ul li .ico14 {background-image: url('/assets/site/img/contents/service_ico_14.svg');}
.service04 .right ul li .ico15 {background-image: url('/assets/site/img/contents/service_ico_15.svg');}
.service04 .right ul li .ico16 {background-image: url('/assets/site/img/contents/service_ico_16.svg');}
.service04 .right ul li .ico17 {background-image: url('/assets/site/img/contents/service_ico_17.svg');}
.service04 .right ul li .ico18 {background-image: url('/assets/site/img/contents/service_ico_18.svg');}
.service04 .right ul li .ico19 {background-image: url('/assets/site/img/contents/service_ico_19.svg');}
.service04 .right ul li .ico20 {background-image: url('/assets/site/img/contents/service_ico_20.svg');}

html[data-dark=true] .service04 .right ul li .ico01 {background-image: url('/assets/site/img/contents/service_ico_01_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico02 {background-image: url('/assets/site/img/contents/service_ico_02_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico03 {background-image: url('/assets/site/img/contents/service_ico_03_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico04 {background-image: url('/assets/site/img/contents/service_ico_04_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico05 {background-image: url('/assets/site/img/contents/service_ico_05_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico06 {background-image: url('/assets/site/img/contents/service_ico_06_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico07 {background-image: url('/assets/site/img/contents/service_ico_07_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico08 {background-image: url('/assets/site/img/contents/service_ico_08_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico09 {background-image: url('/assets/site/img/contents/service_ico_09_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico10 {background-image: url('/assets/site/img/contents/service_ico_10_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico11 {background-image: url('/assets/site/img/contents/service_ico_11_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico12 {background-image: url('/assets/site/img/contents/service_ico_12_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico13 {background-image: url('/assets/site/img/contents/service_ico_13_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico14 {background-image: url('/assets/site/img/contents/service_ico_14_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico15 {background-image: url('/assets/site/img/contents/service_ico_15_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico16 {background-image: url('/assets/site/img/contents/service_ico_16_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico17 {background-image: url('/assets/site/img/contents/service_ico_17_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico18 {background-image: url('/assets/site/img/contents/service_ico_18_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico19 {background-image: url('/assets/site/img/contents/service_ico_19_dark.svg');}
html[data-dark=true] .service04 .right ul li .ico20 {background-image: url('/assets/site/img/contents/service_ico_20_dark.svg');}

.mySwiper{position: relative; overflow: hidden;}
.mySwiper .list{}
.mySwiper .item{}
.mySwiper .item .img{}
.mySwiper .item .img img{width: 100%; height: auto;}

.left .dots{z-index: 1; display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 50px;}
.left .dots li{width: auto; height: auto; border-radius: 0; opacity: 1; margin: 0 !important; background: none;}
.left .dots li button{position: relative; display: block; width: 100%; height: 100%; color: #828282; font-size: 20px; font-weight: 600; border: none; background: none; padding: 12px 0;}
.left .dots li.swiper-pagination-bullet-active button {color: #1C69FF; font-weight: 700; color: var(--black);}
.left .dots li.swiper-pagination-bullet-active button .progress .bar{animation: width 3s linear; /* js : autoPlaySpeed 와 동일하게 맞추기 */}
.left .dots li.swiper-pagination-bullet-active button .progress .bar.pause{animation-play-state: paused !important;}

.left .control{ display: flex; gap: 45px;}
.left .btn_s{position: relative; display: block; width: 30px; height: 30px; border: none; background-color: none; cursor: pointer; font-size: 0;}
.left .btn_s_prev{}
.left .btn_s_next{}
.left .btn_s_prev:before,
.left .btn_s_next:after{content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 45%; height: 45%; border-top: 3px solid var(--black); border-left: 3px solid var(--black); transform: translate(-30%, -50%) rotate(-45deg);}
.left .btn_s_next:after{transform: translate(-70%, -50%) rotate(135deg);}

@keyframes width{
    0%  {width: 0;}
    100%{width: 100%;}
}


@media screen and (max-width: 1680px){
    .service {font-size: 1rem;}
    .service .tit {font-size: 30px; line-height: 120%;}
    .service .info .sub {font-size: 50px;}
    .service .info ul li .desc .d_tit {font-size: 25px;}
    .service .info ul li .desc .d_txt br {display: none;}


    .service01 .left h1 {font-size: 100px;}
    .service01 .info ul {justify-content: flex-start;}
    .service01 .info ul li {width: calc((100% - 100px) / 3); max-width: none;}

    .service02::before {width: 35%; height: 90%;}
    .service02 .left {width: 55%;}
    .service03 .left .info ul {}

    .service03 .item .right {width: 60%;}
    .service03 .item .left {}
    .left .dots {column-gap: 20px;}
    .left .dots li button {font-size: 18px; padding: 8px 0;}

    .service04 .right {width: 1000px;}
    .service04 .right ul {gap: 35px;}
    .service04 .right ul li {width: calc((100% - 210px) / 7);}
    .service04 .right ul li p {font-size: 1rem;}

}
@media screen and (max-width: 1280px){
    .service .tit {font-size: 22px;}
    .service .info .sub {font-size: 40px;}
    .service .info ul li .desc .d_tit {font-size: 22px;}

    .service01 .left h1 {font-size: 80px;}
    .service01 .info ul {margin-top: 30px;}

    .service02::before {width: 35%; height: 75%;}
    .service02 .left .info ul {gap: 20px; margin-top: 30px;}

    .service04 .tit {}
    .service04 .tit span {display: inline-block;}
    .service04 .wrap {flex-direction: column;}

    .service04 .left {order: 1; text-align: center; gap: 5px;}
    .service04 .right {order: 2; width: 100%;}
    .service04 .right ul {justify-content: center;}
    .service04 .right ul li {width: 120px;}


}
@media screen and (max-width: 1080px){
    .service .info .sub {font-size: 30px;}

}
@media screen and (max-width: 860px){
    .service .wrap {gap: 40px;}
    .service_wrap {gap: 150px;}

    .service .info ul li .desc .d_tit {font-size: 18px;}
    .service .info ul li .desc .d_txt {min-height: 100px;}

    .service01 .left h1 {font-size: 50px; position: relative; top: auto; right: auto; text-align: left;}
    .service01 .left h1 span {margin-right: 0; margin-left: 77px;}
    .service01 .left .tit {margin-top: 20px;}
    .service01 .left .tit span {display: inline-block;}

    .service01 .info ul {row-gap: 60px; column-gap: 20px;}
    .service01 .info ul li {width: calc((100% - 20px) / 2);}

    .service02 {}
    .service02::before {width: 93%; margin: 0 3.5%; height: 250px; position: relative; top: auto; right: auto; background: #F9F9F9 url("/assets/site/img/contents/service_09.png") no-repeat top 35% center; background-size: 130%;}
    .service02 .left {width: 100%; margin-top: 25px; gap: 25px;}
    .service02 .left .info ul {}
    .service02 .left .info ul li {width: calc((100% - 20px) / 2);}

    .service03 .wrap {gap: 150px;}
    .service03 .item {flex-direction: column; gap: 40px;}
    .service03 .item .left {gap: 20px; width: 100%; position: relative;}
    .service03 .item .left .control {gap: 20px; position: absolute; top: 72px; right: 0;}
    .service03 .item .right {width: 100%;}
    .service03 .item01 .right {order: 2; width: 100%;}
    .service03 .item01 .left {order: 1;}

    .left .dots {gap: 10px;}
    .left .dots li button {font-size: 1.3rem; padding: 5px 0;}

}
@media screen and (max-width: 568px){
    .service .wrap {gap: 25px;}
    .service .tit {font-size: 18px;}
    .service .info ul li .desc .d_tit {font-size: 18px;}

    .service01 .info ul li .desc {margin-bottom: 20px;}





    .service01 .info ul li {width: 100%;}
    .service01 .info ul li .desc .d_txt {min-height: auto;}

    .service02::before {height: 250px;}

    .service02 .left .info ul {}
    .service02 .left .info ul li {width: 100%;}
    .service02 .info ul li .desc .d_txt {min-height: auto;}

    .service03 .wrap {gap: 150px;}


    .service04 {padding: 100px 0;}
    .service04 .left {gap: 0;}
    .service04 .right ul li {width: 100px;}

}
@media screen and (max-width: 425px){

}