@media (min-width: 576px){/*size-sm*/
  .hide-sm { display: none !important; }
	.wd-base { width: 200px !important; }
	.mw-base { min-width: 90px !important; }
}
@media (max-width: 575px){/*size-xs*/
  .hide-xs { display: none !important; }
	.wd-base { width: 100% !important; }
}
@media (min-width: 768px){/*size-md*/
  .hide-md { display: none !important; }
}
@media (min-width: 992px){/*size-lg*/
  .hide-lg { display: none !important; }
}
@media (min-width: 1200px){/*size-xl*/
  .hide-xl { display: none !important; }
	
}


/* ======================================================= */
/* -------------- Default style (for desktop) ------------ */
/* ======================================================= */




/* etc. size */
@media (min-width: 1400px) and ( max-width: 1500px ) {
  header div.logo-box { left: 20px; }
  header div.navi-box { right: 20px; }
  /* .container { padding: 0 40px; } */
  /* .page-main section.sec-02 .carousel-wrap ul.bt-box { left:20px; } */
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:first-child { font-size: 3.5em; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(2) { font-size: 2.5em; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(3) { font-size: 1.5em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-head { font-size: 1.5em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-body { font-size: 2.25em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-04 .tx-wrap p { font-size: 2.5em; }
  .page-main section.sec-03 .sub-section#sub_sec_03 { padding: 215px 0 350px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item>.i-box { background-position: bottom 40px right 40px; background-size: 125px; }
  
}


/* ======================================================================== */
/* ------------------- [ XL size (1399px ~ 1200px) ] ---------------------- */
/* ======================================================================== */
@media (max-width: 1399px){
  header.scroll div.container { max-width: 100%; }
  header.scroll div.logo-box { left: 20px; }
  header.scroll div.navi-box { right: 20px; }
  .btm-floating-btn { bottom: 80px; right: 80px; }

  .container { padding: 0 0px; max-width: 1160px; }
  section h3 { font-size: 4em; }

  .page-main section .sub-section { padding: 50px 0 50px; }
  .page-main section.sec-01 { padding-top: 30vh; }
  .page-main section.sec-01 .txt-wrap p { font-size: 4.5em; }
  .page-main section.sec-01 .carousel-wrap { padding-bottom: 200px; }
  .page-main section.sec-02 .swiper-slide>.inner { height: 95vh; min-height: auto; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .chart-inner { max-width: 500px; }
  .page-main section.sec-03 { padding: 100px 0 0; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li { flex: 1.25; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap { padding: 130px 80px; }
  .page-main section.sec-03 .sub-section#sub_sec_02 { padding-bottom: 100px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 { padding: 180px 0 0; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box { background-size: 35%; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p { width: calc(100% - 80px); }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p br { display: none; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p:nth-child(1) { font-size: 2.25em; }
  .page-main section.sec-03 .sub-section#sub_sec_04 { padding: 0 0 100px; }
  .page-main section.sec-04, 
  .page-main section.sec-05,
  .page-main section.sec-06 { padding: 100px 0; margin-bottom: 0; }
  .page-main section.sec-04 .s-head,
  .page-main section.sec-05 .s-head { margin-bottom: 60px; }
  .page-main section.sec-05 .slides-box.s-001 { margin-bottom: 80px; }
  .page-main section.sec-05 .slides-box.s-001>.container { margin-bottom: 40px; }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper-scrollbar { bottom: 0; }

  .page-sub section { margin-bottom: 40px; }
  .page-sub section.top { margin-bottom: 20px; }
  .page-sub section .item-wrap { gap:30px; }
  .page-sub section.top .hd-text ul>li.t-d01>p { font-size: 4.25em; }
  .page-sub section h3 { font-size: 3.75em; margin-bottom: 40px; }
  .page-sub .para>p:nth-child(2) { line-height: 1.2; }
  .page-sub .contents-wrap .corp-desc .paras>li { margin-bottom: 5px; }
  .page-sub .contents-wrap .corp-desc .paras>li>p { line-height: 1.2; }

  .page-sub.about .sec-02 .item-wrap>.item { padding: 50px 25px; }
  .page-sub.about .sec-02 .item-wrap>.item::after { top:65px; right: 30px; }
  .page-sub.about .sec-02 .item-wrap>.item>ul>li>p { font-size: 1.25em; letter-spacing: -0.5px; }
  .page-sub.about .sec-03 .h-list::before,
  .page-sub.about .sec-03 .h-list::after { left: 350px; }
  .page-sub.about .sec-03 .h-list .period { width: 350px; }
  .page-sub.about .sec-03 .h-list .detail-box { width: calc(100% - 350px); }
  .page-sub.about .sec-03 .h-list .period>p.tit::after { top: 10px; right:-8px; }
  .page-sub.about .sec-04 .hd-para { width: 40%; }
  .page-sub.about .sec-04 .item-wrap { width: 60%; }
  .page-sub.about .sec-04 .item-wrap .item>p { margin-bottom: 15px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box { gap: 20px; padding: 20px 20px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box>span { flex: 0 0 140px; font-size: 1.4em; }
  .page-sub.about .sec-04 .item-wrap .item .team-box ul>li { font-size: 1.2em; letter-spacing: -0.5px; word-break: keep-all; }
  .page-sub.about .sec-06 .address { margin-bottom: 30px; }

  .page-sub.work.services .item-list .item p { padding-left: 10px; }
  .page-sub.work.services .item-list .item p:nth-child(2) { margin: 20px 0 5px;  }
  .page-sub.work.services .sec-03 .contents-wrap .corp-desc { width: 55%; padding-right: 50px; }
  .page-sub.work.services .sec-03 .contents-wrap .corp-imgs { width: 45%; }

  .page-sub.work.cs ul.keywords { margin-bottom: 40px; }
  .page-sub.work.cs .sec-02 .item-list .item { padding: 40px 25px 40px; }
  .page-sub.work.cs .sec-02 .item-list .item::after { width: 75px; height: 75px; top: 70px; right: 15px; }
  .page-sub.work.cs .sec-02 .item-list .item p.i-ti { width: calc(100% - 80px); margin-bottom: 60px; }
  .page-sub.work.cs .sec-02 .item-list .item ul>li { margin-bottom: 3px; }
  .page-sub.work.cs .sec-02 .item-list .item ul>li>p { font-size: 1.25em; }
  .page-sub.work.cs .sec-02 .item-list .item ul>li>p>span:first-child { white-space: nowrap; }
  .page-sub.work.cs .sec-04 .hd-para { width: 40%; padding-right: 40px; }
  .page-sub.work.cs .sec-04 .item-wrap { width: 60%; }
  .page-sub.work.cs .sec-05 .corp-desc>p { margin-bottom: 30px; }

  footer { padding-top: 100px; }
  footer .ft-main { margin-bottom: 50px; }
  footer .ft-main p.sub-des { font-size: 2.5em; }
  footer .site-map>ul { gap: 30px; }
  footer .site-map>ul>li { white-space: nowrap; }
}



/* ======================================================================== */
/* --------------------- [ LG size (1199px ~ 992px)] ---------------------- */
/* ======================================================================== */
@media (max-width: 1199px){
  .container { padding: 0 60px; max-width: 100%; }
  .bt-primary { padding: 6px 30px; font-size: 1.3em; }

  header.scroll div.container { max-width: 100%; }
  header div.logo-box { left: 60px; }
  header div.navi-box { right: 60px; }
  footer { padding-top: 80px; }
  footer .ft-bottom { padding: 30px 0px 30px; margin-top: 80px; }
  footer .ft-main p.sub-tit { font-size: 1.2em; letter-spacing: -0.5px; }
  footer .ft-main p.sub-tit>span { font-size: 1.2em; }
  footer .ft-main p.sub-des { font-size: 1.8em; }
  footer .ft-contact>p { gap: 10px; font-size: 1.2em; letter-spacing: -0.5px; }
  footer .ft-contact>p::before { width: 35px; height: 35px; }
  .btm-floating-btn { bottom: 80px; right: 80px; }
  .btm-floating-btn::after { width: 375%; height: 375%; }
  
  section h3 { font-size: 3.75em; }

  .page-main section .s-head>ul>li>p { font-size: 1.4em; }
  .page-main section .s-head>ul>li.bt-box { justify-content: flex-end; margin-top: 25px; }
  .page-main section .sub-section h4.s-tit { font-size: 2.5em; }

  .page-main section.sec-01 { padding: 30vh 0 0; }
  .page-main section.sec-01 .txt-wrap p { font-size: 3.75em; }
  .page-main section.sec-01 .carousel-wrap { padding-bottom: 160px; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box { left: 60px; }
  .page-main section.sec-02 .swiper-slide>.inner { height: 80vh; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:first-child { margin-bottom: 20px; font-size: 3.0em; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(2) { margin-bottom: 15px; font-size: 2.0em;  }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(3) { font-size: 1.25em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart { gap: 20px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-label .label-amount,
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-label .label-text { font-size: 1.5em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .chart-inner { max-width: 100%; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item { padding: 0 25px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-head { font-size: 1.25em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-body { font-size: 1.85em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item:nth-child(4) { gap: 10px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-04 .tx-wrap .logo { width: 115px; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li { flex: 1; height: 75vh; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item { left: 25px; height: auto; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li:nth-child(1) .item { padding-left: 65px; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item p.s-tit { font-size: 1.3em; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item p.s-dec { font-size: 2.0em; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item a { margin-top: 30px; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(1),
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(2) { font-size: 3em; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-btm>p { font-size: 1.3em; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap { padding: 80px 80px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap { gap: 20px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box { background-size: 30%; background-position: bottom 25px right 20px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p { left: 30px; width: calc(100% - 55px); }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p:nth-child(1) { top: 35px; font-size: 1.7em; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p:nth-child(2) { top: 105px; font-size: 1.25em; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item .txt-box p:nth-child(1) { font-size: 1.7em; }
  .page-main section.sec-04 .s-head,
  .page-main section.sec-05 .s-head { margin-bottom: 50px; }
  .page-main section.sec-05 .slides-box .tab-pane h4 { top: -75px; font-size: 2.0em; }
  .page-main section.sec-05 .slides-box.s-001 { margin-bottom: 100px; }
  .page-main section.sec-05 .slides-box.s-002 h4.s-tit { font-size: 2.25em; margin-bottom: 40px; }
  .page-main section.sec-05 .slides-box.s-001 ul[role='tablist']>li>button { padding: 6px 20px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li { margin-bottom: 25px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button { font-size: 1.3em; }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper { padding-bottom: 25px; }
  .page-main section.sec-06 .s-head h3 { font-size: 3.0em; }

  .page-sub section { margin-bottom: 20px; padding: 60px 0; }
  .page-sub section h3 { font-size: 3.25em; margin-bottom: 30px; }
  .page-sub .para>p:nth-child(1) { font-size: 1.5em; line-height: 1.3; }
  .page-sub .para>p:nth-child(2) { font-size: 1.4em; margin-bottom: 30px; }
  
  .page-sub section.top { padding: 200px 0 80px; }
  .page-sub section.top .history { margin-bottom: 30px; }
  .page-sub section.top .hd-text ul>li.t-d01>p { font-size: 4.0em; }
  .page-sub section.top .hd-text ul>li.t-d02 { margin-top: 40px; }
  .page-sub section .item-wrap { gap: 20px; }

  .page-sub.about .sec-01 .tracker-wrap { margin-top: 80px; }
  .page-sub.about .sec-02 .item-wrap>.item { padding: 40px 20px; }
  .page-sub.about .sec-02 .item-wrap>.item::after { width: 50px; height: 50px; right: 20px; }
  .page-sub.about .sec-02 .item-wrap>.item p.tit { margin-bottom: 50px; font-size: 1.6em; }
  .page-sub.about .sec-02 .item-wrap>.item>ul>li>p { line-height: 1.2; }
  .page-sub.about .sec-03 .h-list .period>p.tit { font-size: 2.25em; }
  .page-sub.about .sec-03 .h-list::before,
  .page-sub.about .sec-03 .h-list::after { left: 300px; }
  .page-sub.about .sec-03 .h-list .period { width: 300px; }
  .page-sub.about .sec-03 .h-list .detail-box { width: calc(100% - 300px); }
  .page-sub.about .sec-03 .h-list .detail-box dl.item { gap: 0 50px; margin-bottom: 50px; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dt { width: 160px; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dd { width: calc(100% - 215px); }
  .page-sub.about .sec-03 .h-list .list-cont { margin-bottom: 50px; }
  .page-sub.about .sec-04 .hd-para { width: 35%; padding-right: 30px; }
  .page-sub.about .sec-04 .item-wrap { width: 65%; gap: 30px; }
  .page-sub.about .sec-04 .item-wrap .item>p { margin-bottom: 10px; text-indent: 15px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box { padding: 15px 15px; gap: 15px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box>span { flex: 0 0 120px; font-size: 1.25em; }

  .page-sub.work.services .item-list .item { padding-bottom: 35px; }
  .page-sub.work.services .sec-03 .contents-wrap .corp-desc { width: 50%; }
  .page-sub.work.services .sec-03 .contents-wrap .corp-imgs { width: 50%; }

  .page-sub.work.cs .sec-02 .item-list.row { margin: -10px; }
  .page-sub.work.cs .sec-02 .item-list.row>div { padding: 10px; }
  .page-sub.work.cs .sec-02 .item-list .item { padding: 30px 20px 25px; }
  .page-sub.work.cs .sec-02 .item-list .item p.i-ti { font-size: 1.6em; margin-bottom: 40px; }
  .page-sub.work.cs .sec-03 .table-wrap>p { font-size: 1.4em; }
  .page-sub.work.cs .sec-03 .table-wrap table thead>tr>th { font-size: 1.5em; padding: 18px 5px; }
  .page-sub.work.cs .sec-03 .table-wrap table tbody>tr>td { font-size: 1.4em; padding: 15px 5px; }
  .page-sub.work.cs .sec-04 .item-wrap .item { padding: 25px 20px 25px 75px; }
  .page-sub.work.cs .sec-04 .item-wrap .item p { font-size: 1.75em; }
  .page-sub.work.cs .sec-04 .item-wrap .item span.num { top:20px; left:30px; }
  .page-sub.work.cs .sec-05 .contents-wrap .corp-desc { width: 40%; padding-right: 30px; }
  .page-sub.work.cs .sec-05 .contents-wrap .corp-imgs { width: 60%; }
  

  .page-sub.contact .form-wrap p.i-tit { font-size: 1.5em; }
  .page-sub.contact .form-wrap .col-item:not(:last-child) { margin-bottom: 50px; }
  .page-sub.contact .co-info h5 { font-size: 1.25em; }
  .page-sub.contact .co-info p { font-size: 1.15em; }
  .page-sub.contact .co-info>div.email dl>dt { width: 30%; }
  .page-sub.contact .co-info>div.email dl>dd { width: 70%; }

}



/* ======================================================================== */
/* ----------------------- [ MD size (991px ~ 768px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 991px){
  header div.container>div { top:60px; }
  header div.logo-box { left:40px; }
  header div.navi-box { right:40px; }
  footer .ft-main { margin-bottom: 25px; }
  footer .site-map { margin-top: 50px; }
  footer .site-map>ul>li>p { margin-bottom: 15px; }
  footer .ft-bottom { margin-top: 35px; padding: 20px 0px; }
  footer .ft-bottom ul>li { font-size: 1em; letter-spacing: -0.5px; }
  .btm-floating-btn { bottom: 50px; right: 50px; }
  .btm-floating-btn::after { width: 350%; height: 350%; }
  .container { padding: 0 40px; }
  .modal-dialog { max-width: 900px; }
  .modal-content { width: calc(100% - 60px); margin: 0 auto; }
  .modal .content-box { max-height: 40vh; overflow-y: auto; }
  .bt-primary { padding: 6px 25px; font-size: 1.25em; }

  section h3 { font-size: 3.5em; }

  .page-main section .s-head>ul>li>p { font-size: 1.2em; letter-spacing: -0.5px; }
  .page-main section .sub-section h4.s-tit { font-size: 2.25em; }
  .page-main section.sec-01 .txt-wrap p { font-size: 3.25em; line-height: 1.15; }
  .page-main section.sec-01 .carousel-wrap { padding-bottom: 120px; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box { left: 40px; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box>li>button { font-size: 1.75em; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(2) { line-height: 1.1; }
  .page-main section.sec-02 .swiper-slide>.inner.i-01 .brand-field .brand-logo { width: 180px; border-radius: 20px; padding: 10px 40px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .tx-wrap { flex: 1 1 40%; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap { flex: 1 1 60%; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-label .label-amount, 
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-label .label-text { font-size: 1.3em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .tx-wrap { flex: 1 1 40%; padding-right: 20px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap { flex: 1 1 60%; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item { padding: 0 20px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-head { font-size: 1.2em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-body {font-size: 1.5em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-04 .tx-wrap p { font-size: 2.25em; }
  .page-main section.sec-03 .sub-section .va-wrap { display: none; }
  .page-main section.sec-03 .sub-section .va-wrap>ul { flex-direction: column; height: calc(100vh - 120px); }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li { flex: 1.4; height: auto; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li:first-child { flex: 3.6; }
  .page-main section.sec-03 .sub-section .va-wrap>ul:hover>li { flex: 1.4; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li:hover { flex: 3.6; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item { top: 40px; left: 40px; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li:nth-child(1) .item { padding-left: 40px; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item p.s-tit { margin-bottom: 10px; font-weight: 600; text-shadow: 1px 1px 2px rgb(0 0 0 / 40%); }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item p.s-dec { font-size: 1.85em; }
  .page-main section.sec-03 .sub-section .va-wrap>ul>li .item a { margin-top: 20px; padding: 7px 30px; }

  .page-main section.sec-03 .ha-section { display: block; height: 350vh; min-height: 2200px; position: relative; }
  .page-main section.sec-03 .ha-section .ha-sticky { position: sticky; top:0; height: 100vh; overflow: hidden; }
  .page-main section.sec-03 .ha-section .ha-wrap { height: 100vh; }
  .page-main section.sec-03 .ha-section .ha-wrap ul { height: 100%; display: flex; flex-direction: column; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li { flex-grow: 1; transition: flex-grow 0.45s ease; overflow: hidden; position: relative; background-position: center;   
    background-repeat: no-repeat; background-size: cover; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li.active { flex-grow: 4; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li.shrink { flex-grow: 1.5; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li::before { content: ''; width: 100%; height: 100%; position: absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.3); 
    z-index: 1; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li:nth-child(1) { background-image: url("/images/banner/main/main03_sub1_01.jpg"); background-color: #79c7d4; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li:nth-child(2) { background-image: url("/images/banner/main/main03_sub1_02.jpg"); background-color: #b861a2; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li:nth-child(3) { background-image: url("/images/banner/main/main03_sub1_03.jpg"); background-color: #ce7979; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li:nth-child(4) { background-image: url("/images/banner/main/main03_sub1_04.jpg"); background-color: #479640; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li:nth-child(5) { background-image: url("/images/banner/main/main03_sub1_05.jpg"); background-color: #417394; }
  /* .page-main section.sec-03 .ha-section .ha-wrap ul>li .item { position: absolute; top: 50px; left: 40px; z-index: 2; } */
  .page-main section.sec-03 .ha-section .ha-wrap ul>li .item { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li .item .i-inner { position: relative; width: 100%; height: 100%; padding: 50px 40px; -webkit-tap-highlight-color: transparent;
    display: block; -webkit-touch-callout: none; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li .item .i-inner:active,
  .page-main section.sec-03 .ha-section .ha-wrap ul>li .item .i-inner:hover { background-color: transparent; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li .item p { color:#fff; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li .item p.s-tit { font-size: 1.25em; margin-bottom: 15px; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li .item p.s-dec { opacity: 0; font-size: 1.75em; font-weight: 600; margin-bottom: 20px; transition: all ease 0.5s; }
  .page-main section.sec-03 .ha-section .ha-wrap>ul>li .item button { opacity: 0; padding: 8px 25px; background-color: rgba(0, 0, 0, 0.6); border-radius: 25px; overflow: hidden; 
    color: #e9e9e9; font-size: 1em; transition: all ease 0.5s; height: auto; }
  .page-main section.sec-03 .ha-section .ha-wrap ul>li.active .item p.s-dec,
  .page-main section.sec-03 .ha-section .ha-wrap>ul>li.active .item button { opacity: 1; }

  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap { padding: 60px 40px; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(1), 
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(2) { font-size: 2.0em; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-btm>p { font-size: 1.15em; } 
  .page-main section.sec-03 .sub-section#sub_sec_03 { height: auto; min-height: 100vh; padding: 150px 0 0; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap { width: 65%; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p:nth-child(1) { font-size: 1.55em; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p:nth-child(2) { font-size: 1.15em; top: 95px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 h4 { margin-bottom: 30px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap { gap:25px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item .img-box { margin-bottom: 20px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item .txt-box p:nth-child(1) { font-size: 1.4em; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item .txt-box p:nth-child(2) { font-size: 1.2em; }
  .page-main section.sec-05 .slides-box .tab-pane h4 { top: -90px; font-size: 1.8em; }
  .page-main section.sec-05 .slides-box .tab-pane h4 span { display: block; font-size: 85%; }
  .page-main section.sec-05 .slides-box.s-001 .splide .splide__slide { flex: 0 0 35%; }
  .page-main section.sec-05 .slides-box.s-001>.container { margin-bottom: 30px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns { min-width: 220px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button { font-size: 1.15em; letter-spacing: -0.5px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-content { max-width: none; width: calc(100% - 270px); }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper-button-next { right: 20px; }
  .page-main section.sec-06 .tracker::before, .page-main section.sec-06 .tracker::after { width: 80px; }
  
  .page-sub section { padding: 50px 0; }
  .page-sub section h3 { font-size: 3.0em; margin-bottom: 25px; }
  .page-sub section.top .hd-text ul>li.t-d01>p { font-size: 3.75em; }
  .page-sub section.top .hd-text ul>li.t-d02,
  .page-sub section.top .hd-text ul>li.t-d03 { margin-top: 30px; }
  .page-sub .para>p:nth-child(1),
  .page-sub .para>p:nth-child(2) { font-size: 1.25em; line-height: 1.15; }
  .ball-wrap .a-balls { width: 20px; height: 20px; margin-left: 10px; }

  .page-sub.about .sec-01 .tracker-wrap { margin-top: 60px; }
  .page-sub.about .sec-01 .tracker-wrap .track-slide .track-item { width: 360px; }
  .page-sub.about .sec-02 .item-wrap { flex-direction: column; gap: 30px; } 
  .page-sub.about .sec-02 .item-wrap>.item { padding: 40px 40px; }
  .page-sub.about .sec-02 .item-wrap>.item p.tit { margin-bottom: 40px; }
  .page-sub.about .sec-02 .item-wrap>.item p.tit>br { display: none; }
  .page-sub.about .sec-02 .item-wrap>.item::after { width: 75px; height: 75px; top: initial; right: 40px; bottom: 40px; }
  .page-sub.about .sec-03 .h-list .period>p.tit { font-size: 2.0em; }
  .page-sub.about .sec-03 .h-list::before,
  .page-sub.about .sec-03 .h-list::after { left: 250px; }
  .page-sub.about .sec-03 .h-list .period { width: 250px; }
  .page-sub.about .sec-03 .h-list .detail-box { width: calc(100% - 250px); }
  .page-sub.about .sec-03 .h-list .detail-box dl.item { margin-bottom: 30px; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dt { width: 130px; font-size: 1.5em; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dd { width: calc(100% - 185px);}
  .page-sub.about .sec-04 h3+div.flex { flex-direction: column; }
  .page-sub.about .sec-04 .hd-para { width: 100%; padding:0; margin-bottom: 20px; }
  .page-sub.about .sec-04 .item-wrap { width: 100%; }
  .page-sub.about .sec-04 .item-wrap .item>p { text-indent: 0; }
  .page-sub.about .sec-04 .item-wrap .item .team-box { padding: 20px; gap:20px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box>span { padding: 30px 0; }
  .page-sub.about .sec-05 .item p:nth-child(2) { font-size: 1.4em; }
  .page-sub.about .sec-06 .address { justify-content: space-between; gap: 30px; }
  .page-sub.about .sec-06 .address ul>li { font-size: 1.4em; }
  .page-sub.about .sec-06 #map { height: 400px; }

  .page-sub.work.marketing .sec-02 .item-wrap { flex-wrap: wrap; }
  .page-sub.work.marketing .sec-02 .item-wrap .item { flex:0 0 calc(50% - 15px); }
  .page-sub.work.marketing .sec-03 .contents-wrap { flex-direction: column; }
  .page-sub.work.marketing .sec-03 .contents-wrap .corp-desc,
  .page-sub.work.marketing .sec-03 .contents-wrap .corp-imgs { width: 100%; }
  .page-sub.work.marketing .sec-03 .corp-desc .hd-tit { margin-bottom: 25px; }
  .page-sub.work.marketing .sec-03 .contents-wrap { margin-bottom: 40px; }
  .page-sub.work.marketing .sec-03 .contents-wrap .corp-desc .hd-tit>img { max-width: 120px; }
  .page-sub.work.marketing .sec-03 .contents-wrap .corp-desc ul.keywords { margin-bottom: 30px; }
  .page-sub.work.marketing .sec-03 .contents-wrap .corp-desc ul.paras { margin-bottom: 30px; }
  .page-sub.work.marketing .sec-03 .contents-wrap .swiper-pagination { right:0; bottom: 20px; }
  .page-sub.work.marketing .sec-03 .corp-imgs .swiper .swiper-slide img { width: 100%; max-height: 45vh; object-fit: cover; } 
  .page-sub.work.marketing .sec-04>div.container { padding-bottom: 0; }
  .page-sub.work.marketing .sec-04 .swiper .swiper-slide>a>img { width: 100%; min-height: 45vh; max-height: 400px; object-fit: cover; }
  .page-sub.work.marketing .sec-04 .swiper-pagination { width: 100%; justify-content: center; bottom: 20px; }
  .page-sub.work.marketing .sec-05 .item p:nth-child(1) { margin: 15px 0 8px; }
  .page-sub.work.marketing section.sec-06 { padding-bottom: 80px; }

  .page-sub.work.services .item-list .item p:nth-child(3) { font-size: 1.4em; }
  .page-sub.work.services .sec-03 .contents-wrap .corp-desc { width: 46%; padding-right: 25px; }
  .page-sub.work.services .sec-03 .contents-wrap .corp-imgs { width: 54%; }
  .page-sub.work.services .sec-02 .item-list>div:nth-last-child(-n+2)>.item { padding-bottom: 0; }
  
  .page-sub.work.cs .sec-02 .item-list .item::after { width: 70px; height: 70px; top: 60px; }
  .page-sub.work.cs .sec-02 .item-list .item ul>li>p { font-size: 1.15em; }
  .page-sub.work.cs .sec-03 .table-wrap>p { top: -45px; font-size: 1.2em; }
  .page-sub.work.cs .sec-03 .table-wrap table thead>tr>th { font-size: 1.25em; }
  .page-sub.work.cs .sec-03 .table-wrap table tbody>tr>td { font-size: 1.2em; }
  .page-sub.work.cs .sec-04 .hd-para>p { font-size: 1.25em; }
  .page-sub.work.cs .sec-04 .item-wrap .item p { font-size: 1.5em; }
  .page-sub.work.cs .sec-04 .item-wrap .item dl>dd, 
  .page-sub.work.cs .sec-04 .item-wrap .item dl>dt { font-size: 1.2em; }
  .page-sub.work.cs .sec-05 .corp-desc>p { font-size: 1.75em; }
  .page-sub.work.cs .sec-05 .corp-desc .paras>li>p { font-size: 1.25em; }

  .page-sub.contact .co-info>div.email dl>dt,
  .page-sub.contact .co-info>div.email dl>dd { width: 100%; }
  .page-sub.contact .co-info>div.email h5 { margin-bottom: 5px; }
  .page-sub.contact .co-info>div.email dl>dd>p { margin-bottom: 30px; }
  .page-sub.contact .form-wrap p.i-tit { font-size: 1.25em; }


}



/* ======================================================================== */
/* ----------------------- [ SM size (767px ~ 576px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 767px){
  header div.logo-box { left: 40px; }
  header div.navi-box { right: 40px; }
  footer .ft-main { margin-bottom: 30px; }
  footer .ft-bottom { margin-top: 30px; gap:15px; }
  footer .ft-bottom ul>li { word-break: keep-all; font-size: 0.8em; }
  footer .ft-bottom img.f-logo { width: 60px; }
  footer .ft-main p.sub-tit { font-size: 1.05em; }
  footer .ft-main p.sub-des { font-size: 1.5em; }
  footer .ft-contact>p { padding: 3px 0; font-size: 1.1em; }
  footer .ft-contact>p::before { width: 25px; height: 25px; }
  footer .site-map>ul>li>p { font-size: 1.1em; }
  .btm-floating-btn { bottom: 50px; right: 50px; }
  .btm-floating-btn::after { width: 300%; height: 300%; }
  .btm-floating-btn svg.icon-pencil { transform: scale(0.95); }

  .container { padding: 0 40px; }
  .bt-primary { padding: 7px 30px; }
  .swiper-button-next, .swiper-button-prev { width: 45px; height: 45px; }

  section h3 { font-size: 3em; }
  .page-main section .s-head { display: block; }
  .page-main section .s-head h3.tit { margin-bottom: 20px; }
  .page-main section .s-head>ul>li.bt-box { justify-content: space-between; gap: 15px; }
  .page-main section .s-head>ul>li.bt-box>button { padding: 7px 10px; flex: 1 1 auto; min-width: max-content; white-space: nowrap; }
  .page-main section .sub-section p.s-sub { font-size: 1.25em; }
  .page-main section .sub-section h4.s-tit { font-size: 2em; }

  .page-main section.sec-01 .txt-wrap p { font-size: 2.5em; letter-spacing: -1px; }
  .page-main section.sec-01 .carousel-wrap>.swiper-container>.swiper-top .swiper-slide { width: 25%; }
  .page-main section.sec-01 .carousel-wrap>.swiper-container>.swiper-top .swiper-slide img { border-radius: 20px; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box>li { padding: 0; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box>li>button { font-size: 1.6em; }
  .page-main section.sec-02 .swiper-slide { height: 100vh; }
  .page-main section.sec-02 .swiper-slide>.inner { height: 100%; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:first-child { font-size: 2.5em; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(2) { font-size: 1.8em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-01>.container,
  .page-main section.sec-02 .swiper-slide>.inner.i-02>.container,
  .page-main section.sec-02 .swiper-slide>.inner.i-03>.container { display: block; z-index: 4; }
  .page-main section.sec-02 .swiper-slide>.inner.i-01 .tx-wrap, 
  .page-main section.sec-02 .swiper-slide>.inner.i-01 .brand-field { width: 100%; }
  .page-main section.sec-02 .swiper-slide>.inner.i-01 .tx-wrap,
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .tx-wrap,
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .tx-wrap { margin-top: 115px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-01 .brand-field { margin-top: -100px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart { gap: 25px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap { margin-top: 50px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item { padding: 0 30px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-head { font-size: 1.3em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-body { font-size: 2em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-04 .tx-wrap p { font-size: 2em; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap { padding: 45px 40px; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(1), 
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(2) { font-size: 1.8em; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a .img-box img { min-height: 300px; object-fit: cover; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-btm>p { margin-top: 0px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 { height: auto; overflow: visible; padding: 100px 0 150px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 h4>br { display: none; }
  .page-main section.sec-03 .sub-section#sub_sec_03>.container>.inner { flex-direction: column; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .heads { opacity: 0; transform: translateY(24px); }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap { width: 100%; transform: none; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item { transform: translateY(40%); }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap { gap:15px; }
  .page-main section.sec-04 .s-head, 
  .page-main section.sec-05 .s-head { margin-bottom: 25px; }
  .page-main section.sec-04 .cover-items { gap: 50px; }
  .page-main section.sec-04 .cover-items .item .txt-box { flex-wrap: wrap; gap: 20px 10px; padding: 40px 5px 40px; }
  .page-main section.sec-04 .cover-items .item .txt-box>li { flex: 0 0 calc(50% - 5px); }
  .page-main section.sec-05 .slides-box .tab-pane h4 { position: relative; top: 0; margin-bottom: 15px; }
  .page-main section.sec-05 .slides-box .tab-pane h4 span { display: initial; }
  .page-main section.sec-05 .slides-box.s-001 { margin-bottom: 50px; }
  .page-main section.sec-05 .slides-box.s-001>.container { margin-bottom: 25px; }
  .page-main section.sec-05 .slides-box.s-001 ul[role='tablist'] { justify-content: space-between; gap: 10px; }
  .page-main section.sec-05 .slides-box.s-001 ul[role='tablist']>li { flex: 1 1 auto; }
  .page-main section.sec-05 .slides-box.s-001 ul[role='tablist']>li>button { width: 100%; white-space: nowrap; padding: 7px 10px; }
  .page-main section.sec-05 .slides-box.s-001 .splide .splide__slide .item .i-btm { height: 80px; }
  .page-main section.sec-05 .slides-box.s-001 .splide .splide__slide .item .i-btm img { max-height: 100%; }
  .page-main section.sec-05 .slides-box.s-002 h4.s-tit { margin-bottom: 30px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns { width: 100%; min-width: auto; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul { flex-wrap: wrap; flex-direction: row; gap: 12px 30px; margin-bottom: 25px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li { margin-bottom: 0; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button { padding: 8px 1px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-content { width: 100%; }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper-slide .i-brand { height: 80px; }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper-slide .i-brand img { max-height: 100%; top: -30px; }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper { padding-bottom: 0; }
  .page-main section.sec-06 .s-head h3 { font-size: 2.5em; margin-bottom: 40px; }
  .page-main section.sec-06 .tracker { height: 80px; }
  .page-main section.sec-06 .tracker .track-slide { gap: 25px; }
  .page-main section.sec-06 .tracker .track-slide .track-item { width: 80px; }
  .page-main section.sec-06 .tracker:first-child { margin-bottom: 5px; }

  .page-sub section { padding: 40px 0; }
  .page-sub section h3 { font-size: 2.25em; margin-bottom: 20px; }
  .page-sub section.top { padding:160px 0 40px; }
  .page-sub section.top .history { gap: 10px; }
  .page-sub section.top .history>span { font-size: 1.1em; }
  .page-sub section.top .hd-text ul>li.t-d01>p { font-size: 3.0em; letter-spacing: -0.5px; }
  .page-sub section.top .hd-text ul>li.t-d02>p { font-size: 1.5em; }
  .page-sub section.top .hd-text ul>li.t-d03>p { font-size: 1.25em; }
  .page-sub ul.keywords>li { padding: 12px 20px; }
  .ball-wrap .a-balls { width: 16px; height: 16px; margin-bottom: 8px; }

  .page-sub.about section.top .hd-text ul>li.t-d01>p { font-size: 2.75em; }
  .page-sub.about .sec-01 .tracker-wrap .track-slide .track-item { width: 300px; }
  .page-sub.about .sec-02 .item-wrap>.item { padding: 30px; }
  .page-sub.about .sec-02 .item-wrap>.item::after { bottom: 30px; right: 30px; }
  .page-sub.about .sec-03 .h-list .period>p.tit { font-size: 1.5em; line-height: 1.15; }
  .page-sub.about .sec-03 .h-list .period>p.tit>br { display: block; }
  .page-sub.about .sec-03 .h-list::before,
  .page-sub.about .sec-03 .h-list::after { left: 150px; }
  .page-sub.about .sec-03 .h-list .period { width: 150px; }
  .page-sub.about .sec-03 .h-list .period>p.tit::after { top: 5px; }
  .page-sub.about .sec-03 .h-list .detail-box { width: calc(100% - 150px); margin: 25px 0; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item { gap: 0 30px; margin-bottom: 20px; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dt { width: 100px; font-size: 1.2em; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dd { width: calc(100% - 130px); font-size: 1.2em; }
  .page-sub.about .sec-04 .item-wrap .item .team-box { padding: 15px;  }
  .page-sub.about .sec-04 .item-wrap .item .team-box>span { flex: 0 0 100px; border-radius: 10px; font-size: 1.1em; }
  .page-sub.about .sec-05 .item .i-cover { border-radius: 12px; }
  .page-sub.about .sec-05 .item p:nth-child(2) { margin: 10px 0; font-size: 1.3em; }
  .page-sub.about .sec-05 .item p:last-child { font-size: 1.0em; }
  .page-sub.about .sec-06 .address { flex-direction: column; gap: 10px; }
  .page-sub.about .sec-06 #map { height: 300px; } 
  
  .page-sub.work.marketing .keywords { margin-bottom: 30px; }
  .page-sub.work.marketing .sec-02 .item-wrap .item { padding: 30px 15px; }
  .page-sub.work.marketing .sec-02 .item-wrap .item .i-cover { width: 35%; height: auto; margin: 0 auto 30px; }
  .page-sub.work.marketing .sec-02 .item-wrap .item p.t-hd { font-size: 1.5em; margin-bottom: 20px; }
  .page-sub.work.marketing .sec-02 .item-wrap .item p.t-ds { font-size: 1.25em; }
  .page-sub.work.marketing .sec-03 .corp-desc .paras>li { margin-bottom: 5px; font-size: 1.25em; }
  .page-sub.work.marketing .sec-03 .corp-desc .paras>li>p { line-height: 1.15; }
  .page-sub.work.marketing .sec-03 .corp-desc .hd-tit>p { margin-bottom: 10px; }
  .page-sub.work.marketing .sec-05 .item .i-cover,
  .page-sub.work.marketing .sec-06 .item .i-cover { border-radius: 15px; }
  .page-sub.work.marketing .sec-05 .item p:nth-child(1),
  .page-sub.work.marketing .sec-06 .item p:nth-child(1) { margin: 10px 0 5px; font-size: 1.3em; }
  .page-sub.work.marketing .sec-05 .item p:nth-child(2),
  .page-sub.work.marketing .sec-06 .item p:nth-child(2) { font-size: 1.1em; }

  .page-sub.work.services .item-list .item { padding-bottom: 20px; }
  .page-sub.work.services .item-list .item p:nth-child(2) { margin: 10px 0 5px; }
  .page-sub.work.services ul.paras { margin-bottom: 25px; }
  .page-sub.work.services .bt-wrap { padding-top: 20px; }
  .page-sub.work.services .sec-03 .contents-wrap { flex-direction: column; }
  .page-sub.work.services .sec-03 .contents-wrap .corp-desc { width: 100%; padding-right: 0; }
  .page-sub.work.services .sec-03 .contents-wrap .corp-imgs { width: 100%; }
  .page-sub.work.services .sec-03 .corp-imgs .swiper .swiper-slide img { width: 100%; max-height: 45vh; object-fit: cover; }
  .page-sub.work.services .sec-03 .swiper-pagination { right:0; bottom: 15px; }

  .page-sub.work.cs ul.keywords { margin-bottom: 20px; }
  .page-sub.work.cs .sec-05 .corp-desc>p,
  .page-sub.work.cs .sec-05 .corp-desc>ul.paras { margin-bottom: 20px; }
  .page-sub.work.cs .sec-02 .item-list .item { padding: 25px 20px 20px; }
  .page-sub.work.cs .sec-02 .item-list .item::after { width: 60px; height: 60px; }
  .page-sub.work.cs .sec-02 .item-list .item p.i-hd { margin-bottom: 10px; }
  .page-sub.work.cs .sec-02 .item-list .item p.i-ti { width: calc(100% - 55px); font-size: 1.4em; margin-bottom: 30px; }
  .page-sub.work.cs .sec-02 .item-list>div:nth-child(n+4) .item::after { top: 45px; }
  .page-sub.work.cs .sec-03 .table-wrap>p { top: -40px; }
  .page-sub.work.cs .sec-03 .table-wrap table thead>tr>th,
  .page-sub.work.cs .sec-03 .table-wrap table tbody>tr>td { font-size: 0.95em; padding: 8px 2px; }
  .page-sub.work.cs .sec-04 div.flex { flex-direction: column; }
  .page-sub.work.cs .sec-04 .hd-para { width: 100%; padding: 0; margin-bottom: 15px; }
  .page-sub.work.cs .sec-04 .item-wrap { width: 100%; }
  .page-sub.work.cs .sec-04 .item-wrap .item { padding: 65px 25px 25px; }
  .page-sub.work.cs .sec-04 .item-wrap .item span.num { left:25px; }
  .page-sub.work.cs .sec-05 .contents-wrap { flex-direction: column; }
  .page-sub.work.cs .sec-05 .contents-wrap .corp-desc,
  .page-sub.work.cs .sec-05 .contents-wrap .corp-imgs { width: 100%; }
  .page-sub.work.cs .sec-05 .contents-wrap .swiper-pagination { right:0; bottom: 20px; }
  .page-sub.work.cs .sec-05 .corp-imgs .swiper .swiper-slide img { width: 100%; max-height: 60vh; object-fit: cover; }
  


  .page-sub.contact .para { margin-bottom: 40px; }
  .page-sub.contact .co-info { margin-bottom: 40px; }
  .page-sub.contact .co-info>div:not(:last-child) { margin-bottom: 30px; }
  .page-sub.contact .co-info>div.email dl>dt { width: 30%; }
  .page-sub.contact .co-info>div.email dl>dd { width: 70%; }
}



/* ======================================================================= */
/* ----------------------- [ XS size (575px~ 이하) ] --------------------- */
/* ======================================================================= */
@media (max-width: 575px){
  header div.container>div { top: 30px; }
  header div.logo-box { left: 25px; }
  header div.logo-box a { width: 50px; }
  header div.navi-box { right: 25px; }
  header div.navi-box button.bt-menu { width: 35px; height: 35px; gap: 4px; }
  header div.navi-box button.bt-menu>span { width: 18px; height: 2px; }
  header div.navi-box button.bt-menu.active>span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  header div.navi-box button.bt-menu.active>span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  header div.navi-box .menu-list { top: 55px; }
  header div.navi-box .menu-list ul>li { margin-bottom: 8px; }
  header div.navi-box .menu-list ul>li>a { padding: 7px 16px; font-size: 0.9em; }
  footer { padding-top: 40px; }
  footer .ft-main p.sub-tit { font-size: 1em; }
  footer .ft-main p.sub-des { font-size: 1.5em; }
  footer .ft-contact>p { font-size: 1em; }
  footer .site-map>ul>li>p { font-size: 1.1em; }
  footer .site-map>ul>li>div>a { margin-right: 0; margin-bottom: 9px; font-size: 0.9em; }
  footer .ft-bottom { padding: 15px 0; }
  .btm-floating-btn { bottom: 50px; right: 45px; }
  .btm-floating-btn::after { width: 280%; height: 280%; }
  .btm-floating-btn svg.icon-pencil { transform: scale(0.95); }
  .ball-wrap .a-balls { width: 15px; height: 15px; margin-left: 5px; }
  .swiper-button-next, .swiper-button-prev { width: 40px; height: 40px; }

  .modal .modal-content .modal-header { padding: 40px 40px 20px; }
  .modal .modal-content .modal-header .modal-title { font-size: 20px; }
  .modal .modal-content .modal-body { padding: 0px 40px 40px; }
  .modal .content-box h6 { font-size: 16px; }
  .modal .content-box p { font-size: 15px; }
  .container { padding: 0 20px; }

  section h3 { font-size: 2.5em; }

  .page-main section .s-head h3.tit { margin-bottom: 10px; }
  .page-main section .s-head>ul>li:not(:last-child) { margin:0; }
  .page-main section .s-head>ul>li>p { line-height: 1.3; }
  .page-main section .s-head>ul>li.bt-box { gap:5px; margin-bottom: 20px; }
  .page-main section .s-head>ul>li.bt-box>button { padding: 7px 10px; font-size: 1.1em; letter-spacing: -0.5px; } 
  .page-main section .sub-section { padding: 20px 0; }
  .page-main section .sub-section p.s-sub { font-size: 1.15em; margin-bottom: 5px; }
  .page-main section .sub-section h4.s-tit { font-size: 1.75em; letter-spacing: -0.5px; line-height: 1.3; margin-bottom: 20px; }
  .page-main section.sec-01 { padding: 150px 0 0; }
  .page-main section.sec-01 .txt-wrap p:nth-child(2) { display: flex; flex-wrap: wrap; gap: 0px 10px; }
  .page-main section.sec-01 .carousel-wrap { padding-top: 90px; padding-bottom: 100px; }
  .page-main section.sec-01 .carousel-wrap>.swiper-container>.swiper-top .swiper-slide { width: 55%; padding: 0 7px; }
  .page-main section.sec-01 .carousel-wrap>.swiper-container>.swiper-top .swiper-slide img { border-radius: 12px; border-width: 1px; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box { left:20px; gap: 10px; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box>li { gap: 10px; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box>li:last-child { display: none; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box>li::after { width: 1px; height: 35%; }
  .page-main section.sec-02 .carousel-wrap ul.bt-box>li>button { white-space: nowrap; font-size: 1.4em; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:first-child { font-size: 2.2em; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(2) { font-size: 1.6em; line-height: 1.3; margin-bottom: 8px; }
  .page-main section.sec-02 .swiper-slide>.inner .tx-wrap>p:nth-child(3) { font-size: 1.15em; line-height: 1.2; }
  .page-main section.sec-02 .swiper-slide>.inner.i-01 .tx-wrap, 
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .tx-wrap, 
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .tx-wrap { width: 80%; margin-top: 110px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-01 .brand-field { height:100%; margin-top: -150px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap { margin-top: 40px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart { gap: 10px; inset: 10% 5% 15% 5%; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-bg { transform: translateX(10px) scaleY(0); }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-year { bottom: -25px; font-size: 1.1em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-label .label-year { font-size: 1.05em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-label .label-amount, 
  .page-main section.sec-02 .swiper-slide>.inner.i-02 .gp-wrap .bar-chart .bar-label .label-text { font-size: 1.10em; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap { margin-top: 30px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul { gap: 8px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item { padding: 15px 20px; flex:0 0 100%; aspect-ratio: initial; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-head { font-size: 1.1em; margin-bottom: 5px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-body { font-size: 1.4em; line-height: 1.15 }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item p.i-body br { display: none; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item:nth-child(4) { gap: 20px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-03 .gp-wrap ul>li.item:nth-child(4) div.dvd:first-child::after { width: 1px; right: -5px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-04 .tx-wrap .logo { width: 100px; }
  .page-main section.sec-02 .swiper-slide>.inner.i-04 .tx-wrap p { font-size: 1.75em; white-space: normal; }
  .page-main section.sec-03 { padding: 40px 0 0; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide { padding: 0 20px; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a { border-radius: 0; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a .img-box { border-radius: 20px; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a .img-box img { min-height: 50vh; object-fit: cover; object-position: center; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap { position: relative; top:0; padding: 20px 0px 0;  }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap p { color: var(--main-bg-color); }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap .tx-top { margin-bottom: 15px; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a>div.txt-wrap .tx-btm>p { margin: 0; line-height: 1.2; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(1), 
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(2) { font-size: 1.5em; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-top>p:nth-child(1) { margin-bottom: 5px; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-slide>a div.tx-btm>p { font-size: 1.1em; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-button-prev,
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-button-next { top: 30vh; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-button-prev { left: 5px !important; }
  .page-main section.sec-03 .sub-section .carousel-wrap .swiper-button-next { right: 5px !important; }
  .page-main section.sec-03 .sub-section#sub_sec_02 { padding-bottom: 40px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 { padding: 40px 0 80px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap { gap: 12px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box { padding-top: 130%; background-size: 35%; background-position: bottom 15px right 15px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p { width: calc(100% - 30px); left: 15px; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p:nth-child(1) { top: 20px; font-size: 1.25em; }
  .page-main section.sec-03 .sub-section#sub_sec_03 .card-wrap .item .i-box>p:nth-child(2) { top: 65px; font-size: 1.05em; line-height: 1.1; letter-spacing: -0.5px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 { padding-bottom: 40px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 h4 { margin-bottom: 40px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap { flex-wrap: wrap; gap: 25px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item { flex: 100%; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item .img-box { margin-bottom: 10px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item .txt-box p:nth-child(1) { margin-bottom: 5px; }
  .page-main section.sec-03 .sub-section#sub_sec_04 .item-wrap>.item .img-box::after { padding-bottom: 40%; }
  .page-main section.sec-04, .page-main section.sec-05, .page-main section.sec-06 { padding: 40px 0; }
  .page-main section.sec-04 .cover-items .item { padding:5px; }
  .page-main section.sec-04 .cover-items .item .img-box img { min-height: 35vh; object-fit: cover; }
  .page-main section.sec-04 .cover-items .item .txt-box { flex-direction: column; padding: 15px 10px 10px; gap:0; }
  .page-main section.sec-04 .cover-items .item .txt-box>li:not(:last-child) { margin-bottom: 15px; }
  .page-main section.sec-04 .cover-items .item .txt-box>li>p:nth-child(1) { font-size: 1.0em; margin-bottom: 5px; }
  .page-main section.sec-04 .cover-items .item .txt-box>li>p:nth-child(2) { font-size: 1.0em; }
  .page-main section.sec-05 .slides-box .tab-pane h4 { font-size: 1.5em; text-align: center; margin-bottom: 10px; }
  .page-main section.sec-05 .slides-box.s-001 ul[role='tablist'] { flex-wrap: wrap; justify-content: flex-start; }
  .page-main section.sec-05 .slides-box.s-001 ul[role='tablist']>li { flex:none; }
  .page-main section.sec-05 .slides-box.s-001 ul[role='tablist']>li>button { width: fit-content; padding: 7px 20px; }
  .page-main section.sec-05 .slides-box.s-001 .splide .splide__slide { flex: 0 0 40%; }
  .page-main section.sec-05 .slides-box.s-002 h4.s-tit { font-size: 1.75em; margin-bottom: 15px; }
  .page-main section.sec-05 .slides-box.s-002 .tabs-wrapper>div.container { overflow: hidden; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 15px; padding: 0; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li { flex: 1 1 calc(50% - 6px); min-width: fit-content; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button { padding: 6px 20px 6px 0px; white-space: normal; word-break: keep-all; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button::after { display: none; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button>span { background-color: #fff; padding-right: 8px; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button>span::after { content: ''; position: absolute; top:0; left: 0; bottom: 0; width: 0%; height: 2px; margin: auto;
    background-color: #bbb; transition: all ease 0.5s; z-index: -1; opacity: 0; }
  .page-main section.sec-05 .slides-box.s-002 .tab-btns ul>li>button.active>span::after { opacity: 1; width: 100%; background-color: #000; }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper-button-prev { left:5px; }
  .page-main section.sec-05 .slides-box.s-002 .carousel-wrap .swiper-button-next { right:5px; }
  .page-main section.sec-06 .s-head p { font-size: 1.15em; }
  .page-main section.sec-06 .s-head h3 { font-size: 1.75em; margin-bottom: 20px; }
  .page-main section.sec-06 .tracker { height: 70px; }
  .page-main section.sec-06 .tracker .track-slide { gap: 10px; }
  .page-main section.sec-06 .tracker .track-slide .track-item { width: 65px; }
  .page-main section.sec-06 .tracker::before, .page-main section.sec-06 .tracker::after { width: 40px; }

  .page-sub .para>p:nth-child(1) { font-size: 1.25em; line-height: 1.3; margin-bottom: 10px; }
  .page-sub .para>p:nth-child(2) { font-size: 1.15em; margin-bottom: 20px; }
  .page-sub section { margin-bottom: 20px; }
  .page-sub section:not(.top) { padding-bottom: 20px; }
  .page-sub section h3 { font-size: 2em; margin-bottom: 30px; }
  .page-sub section.top { padding: 120px 0 40px; }
  .page-sub section.top .hd-text ul>li.t-d01>p { font-size: 2.85em; }
  .page-sub section.top .hd-text ul>li.t-d01>p.ball-wrap { max-width: 90%; display: inline-block; }
  .page-sub section.top .hd-text ul>li.t-d01>p.ball-wrap .a-balls { display: inline-block; margin: 0; }
  .page-sub ul.keywords>li { padding: 10px 16px; font-size: 1.0em; }

  .page-sub.about .sec-01 .tracker-wrap { margin-top: 40px; }
  .page-sub.about .sec-01 .tracker-wrap .track-slide .track-item { width: 250px; }
  .page-sub.about .sec-02 .item-wrap>.item { overflow: hidden; }
  .page-sub.about .sec-02 .item-wrap>.item::after { width: 55px; height: 55px; top: 25px; right: 20px; }
  .page-sub.about .sec-02 .item-wrap>.item p.lab { font-size: 1.1em; }
  .page-sub.about .sec-02 .item-wrap>.item>ul>li:not(:last-child) { margin-bottom: 5px; }
  .page-sub.about .sec-02 .item-wrap>.item>ul>li>p { font-size: 1.1em; }
  .page-sub.about .sec-03 .h-list::before,
  .page-sub.about .sec-03 .h-list::after { left: 130px; }
  .page-sub.about .sec-03 .h-list .period { width: 130px; }
  .page-sub.about .sec-03 .h-list .period>p.tit { font-size: 1.25em; }
  .page-sub.about .sec-03 .h-list .period>p.tit::after { top: 5px; }
  .page-sub.about .sec-03 .h-list .detail-box { width: calc(100% - 130px); margin: 28px 0 0; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item { gap: 0 15px; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dt { width: 80px; font-size: 1.1em; }
  .page-sub.about .sec-03 .h-list .detail-box dl.item>dd { width: calc(100% - 95px); font-size: 1.1em; }
  .page-sub.about .sec-04 .hd-para { margin-bottom: 10px; }
  .page-sub.about .sec-04 .hd-para>p { font-size: 1.25em; }
  .page-sub.about .sec-04 .item-wrap .item>p { font-size: 1.1em; font-weight: 600; text-indent: 10px; margin-bottom: 20px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box { flex-direction: column; gap: 15px; align-items: flex-start; padding: 10px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box>span { flex: auto; min-width: 100px; padding: 10px 10px; }
  .page-sub.about .sec-04 .item-wrap .item .team-box ul>li { font-size: 1em; }
  .page-sub.about .sec-05 .item-wrap { flex-direction: column; }
  .page-sub.about .sec-05 .item .i-cover img { max-height: 225px; width: 100%; object-fit: cover; }
  .page-sub.about .sec-05 .item p:nth-child(2) { font-size: 1.25em; }
  .page-sub.about .sec-05 .item p:last-child { font-size: 1.1em; }
  .page-sub.about .sec-06 .address ul>li { font-size: 1.25em; }

  .page-sub.work.marketing .sec-02 .item-wrap { display: block; }
  .page-sub.work.marketing .sec-02 .item-wrap .item { padding: 25px 25px; }
  .page-sub.work.marketing .sec-02 .item-wrap .item:not(:last-child) { margin-bottom: 20px; }
  .page-sub.work.marketing .sec-02 .item-wrap .item p.t-ds { font-size: 1.1em; }
  .page-sub.work.marketing .sec-02 .item-wrap .item .i-cover { width: 25%; }
  .page-sub.work.marketing .sec-03 .corp-desc .paras>li { font-size: 1.1em; }
  .page-sub.work.marketing .sec-03 .corp-desc .paras>li>p { line-height: 1.3; }
  .page-sub.work.marketing .sec-03 .corp-imgs .swiper .swiper-slide .txt-box>p:nth-child(1) { font-size: 1.0em; margin-bottom: 7px; }
  .page-sub.work.marketing .sec-03 .corp-imgs .swiper .swiper-slide .txt-box>p:nth-child(2) { font-size: 1.4em; }
  .page-sub.work.marketing .item-wrap { flex-direction: column; }
  .page-sub.work.marketing .item-wrap .item { position: relative; overflow: hidden; border-radius: 20px; }
  .page-sub.work.marketing .item-wrap .item .t-box { position: absolute; bottom: 0; width: 100%; color:#fff; background: rgb(0 0 0 / 40%); padding: 15px 10px; }
  .page-sub.work.marketing .sec-05 .item p:nth-child(1), .page-sub.work.marketing .sec-06 .item p:nth-child(1) { margin-top: 0; }
  .page-sub.work.marketing section.sec-06 { padding-bottom: 60px; }
  
  .page-sub.work.services .sec-02 .item-list>div:nth-last-child(-n+3)>.item { padding-bottom: 20px; }
  .page-sub.work.services .sec-02 .item-list>div:last-child>.item { padding-bottom: 0; }
  .page-sub.work.services .sec-03 .corp-desc .paras>li { font-size: 1.1em; }
  .page-sub.work.services .item-list .item .i-cover img { max-height: 250px; }
  .page-sub.work.services .item-list .item p:nth-child(2) { font-size: 1.0em; margin: 20px 0 7px; }
  .page-sub.work.services .item-list .item p:nth-child(3) { font-size: 1.3em; }
  
  .page-sub.work.cs .sec-02 .item-list .item::after { top: 50px; }
  .page-sub.work.cs .sec-03 .table-wrap>p { top: initial; bottom: -20px; font-size: 1em; }
  .page-sub.work.cs .sec-03 .table-wrap .table-scroll { width: 100%; overflow: auto; }
  .page-sub.work.cs .sec-03 .table-wrap .table-scroll::after { content: ''; position: absolute; top: 0; right: 0; width: 22px; height: 100%; pointer-events: none;
    background: linear-gradient(to left, rgb(0 0 0 / 15%), rgb(0 0 0 / 0%)); }
  .page-sub.work.cs .sec-03 .table-wrap .table-scroll table.data-table { min-width: 720px; }
  .page-sub.work.cs .sec-04 .item-wrap .item { padding: 55px 25px 25px; }
  .page-sub.work.cs .sec-04 .item-wrap .item p { margin-bottom: 10px; }
  .page-sub.work.cs .sec-05 .corp-desc>p { font-size: 1.5em; margin-bottom: 15px; }
  .page-sub.work.cs .sec-05 .corp-imgs .swiper .swiper-slide img { max-height: 45vh; }
  .page-sub.work.cs .sec-05 .corp-imgs .swiper .swiper-slide .txt-box>p:nth-child(1) { font-size: 1.0em; font-weight: 300; margin-bottom: 7px; }
  .page-sub.work.cs .sec-05 .corp-imgs .swiper .swiper-slide .txt-box>p:nth-child(2) { font-size: 1.4em; font-weight: 600; }
  .page-sub.work.cs .sec-05 .contents-wrap .corp-desc, .page-sub.work.cs .sec-05 .contents-wrap .corp-imgs { padding:0; }

  .page-sub.contact .co-info { margin-bottom: 20px; }
  .page-sub.contact .co-info>div.email dl>dd>p { margin-bottom: 15px; }
  .page-sub.contact .form-wrap p.i-tit { margin-bottom: 10px; }
  .page-sub.contact .form-wrap input { height: 42px; }
  .page-sub.contact .form-wrap label { font-size: 1.25em; }
  .page-sub.contact .form-wrap .col-item:not(:last-child) { margin-bottom: 40px; }
  .page-sub.contact .form-wrap .chk-box label { font-size: 1.1em; }
  .page-sub.contact .form-wrap .bt-wrap button.bt-send { padding: 7px 10px; font-size: 1.2em; }
  .page-sub.contact .form-wrap .ip-wrap label.btn, .page-sub.contact .form-wrap .ip-wrap a.btn { font-size: 1.25em; }

}



/* ======================================================================= */
/* ---------------------- [ etc size (425px~ 이하) ] --------------------- */
/* ======================================================================= */
@media (max-width: 425px){
  footer .ft-main { margin-bottom: 20px; }
  footer .ft-main p.sub-tit { margin-bottom: 20px; font-size: 0.9em; }
  footer .ft-main p.sub-des { font-size: 1.25em; }
  footer .site-map>ul { flex-wrap: wrap; }
  footer .site-map>ul>li>div>a { font-size: 0.8em; }
  footer .ft-contact>p { font-size: 0.9em; }
  footer .ft-contact>p::before { width: 25px; height: 25px; }
  footer .ft-bottom img.f-logo { display: none; }
  footer .ft-bottom ul>li { text-align: center; }
  .btm-floating-btn { bottom: 40px; right: 35px; }
  .btm-floating-btn::after { width: 250%; height: 250%; }
  .btm-floating-btn svg.icon-pencil { transform: scale(0.8); }

  .modal-content { width: calc(100% - 40px); }
  .modal .modal-content .modal-header { padding: 25px 20px 15px; }
  .modal .modal-content .modal-header .modal-title { font-size: 18px; }
  .modal .modal-content .modal-body { padding: 0px 20px 30px; }
  .modal .content-box { max-height: 50vh; padding: 15px 15px; }

  .page-sub section { padding: 25px 0; }
  .page-sub section h3 { font-size: 1.85em; }
  .page-sub section.top .hd-text ul>li.t-d01>p { font-size: 2.75em; }

  .page-sub .para>p:nth-child(1) { font-size: 1.2em; }
  .page-sub .para>p:nth-child(2) { font-size: 1.1em; }

  .page-sub.about section.top .hd-text ul>li.t-d01>p { font-size: 2.6em; } 
  .page-sub.about .sec-02 .item-wrap>.item::after { opacity: 0.5; }
  .page-sub.about .sec-04 .item-wrap .item>p { line-height: 1.15; }

  .page-sub.work.marketing .sec-02 .item-wrap .item { flex: auto; justify-content: center; padding: 40px 20px; }
  .page-sub.work.marketing .sec-02 .item-wrap .item .i-cover { width: 25%; }
  .page-sub.work.marketing .sec-02 .item-wrap .item p.t-hd { margin-bottom: 15px; }

  .page-sub.work.services .item-list .item { padding-bottom: 10px; }
  
  .page-sub.work.cs .sec-04 .hd-para>p { font-size: 1.2em; }
  .page-sub.work.cs .sec-04 .item-wrap .item p { font-size: 1.25em; }
  .page-sub.work.cs .sec-04 .item-wrap .item dl>dd, .page-sub.work.cs .sec-04 .item-wrap .item dl>dt { font-size: 1.05em; }
  .page-sub.work.cs .sec-05 .corp-desc>p { font-size: 1.4em; }
  .page-sub.work.cs .sec-05 .corp-desc .paras>li>p { font-size: 1.2em; }

  .page-sub.contact .co-info>div.email dl>dt,
  .page-sub.contact .co-info>div.email dl>dd { width: 100%; }
  .page-sub.contact .form-wrap .ip-wrap label.btn { padding: 8px 12px; }
}