@charset "utf-8";

:root {
  --white:#FFFFFF;
  --black:#000000;
  --primary: #3DA7FF;
  --header-height: 90px;
  --header-bg-height: calc(var(--header-height) + 153px);
  --sec-padding: 200px;
}

/* 공통 */
.container {overflow-x:hidden}
.wrapper {width:100%;max-width:1470px;padding:0 20px;margin:0 auto}
.no_scroll {height:100%;overflow:hidden}
.only_mb {display:none}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.btn_primary {display:flex;align-items:center;justify-content:center;gap:0 10px;background:linear-gradient(140deg, rgba(84,79,79,.4), rgba(84,79,79,.1));border:solid 1px rgba(255,255,255,.25);font-size:18px;font-weight:700;color:var(--white);border-radius:100px;backdrop-filter:blur(30px);padding:20px 50px;box-shadow:0 4px 24px rgba(0,0,0,.2);transition:all .2s;position:relative;overflow:hidden;}
.btn_primary::before {content:'';display:block;width:100%;height:100%;background:var(--primary);position:absolute;top:0;left:0;transition:all .2s;opacity:0}
.btn_primary .txt,
.btn_primary img,
.btn_primary svg {position:relative;z-index:3}
.sec {overflow:hidden}

.scroll_custom::-webkit-scrollbar {width:6px}
.scroll_custom::-webkit-scrollbar-thumb {background-clip:padding-box;background-color:#535353;border-radius:50px}
.scroll_custom::-webkit-scrollbar-track {background-color:#2E2E2E;border-radius:50px}

.line_txt {-webkit-text-stroke: 1px var(--white);color:transparent !important}

.title_box {text-align:center;margin-bottom:80px}
.title_box.left {text-align:left}
.title_box.right {text-align:right}
.title_box .sub {display:block;font-size:24px;font-weight:700;color:var(--primary);line-height:1.4;margin-bottom:12px}
.title_box .sub .logo {max-width:246px}
.title_box .tit {display:block;font-size:64px;font-weight:200;line-height:1.35}
.title_box .tit strong {font-weight:700}
.title_box .small_tit {display:block;font-size:48px;font-weight:700;line-height:1.4}
.title_box p {font-size:24px;font-weight:500;margin-top:24px}

/* 텍스트 그라데이션 */
.gra_01 {background:linear-gradient(140deg, #DC03EF, #039CE2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* 헤더 - 하위메뉴 있는경우 */
.header {width:100%;position:fixed;top:0;left:0;z-index:99;transition:all .2s}
.header .bg {width:100%;height:0;background:linear-gradient(140deg, rgba(84,79,79,.4), rgba(84,79,79,.1));backdrop-filter:blur(40px);box-shadow:0 4px 24px rgba(0,0,0,.2);position:absolute;top:0;left:0;}

.header.white .bg {height:var(--header-height)}

.header.black .logo .black {position:initial;opacity:1}
.header.black .logo .white {opacity:0;position:absolute}
.header.black .right .mark {color:#111111}
.header.black .gnb li a {color:var(--black)}
.header.black .menu_open path {fill:var(--black)}

.header .wrapper {display:flex;align-items:center;max-width:1720px;height:var(--header-height)}
.header .logo {display:flex;align-items:center;width:295px;height:100%;z-index:1}
.header .gnb {margin-left:auto}
.header .gnb ul {display:flex;align-items:center;gap:0 80px}
.header .gnb li {position:relative}
.header .gnb li a {display:flex;align-items:center;height:var(--header-height);font-size:18px;color:var(--white);transition:all .2s;text-transform:capitalize;position:relative;transition:all .2s}
.header .gnb >ul>li>a::before {content:'';display:block;width:100%;height:1px;background:var(--white);position:absolute;left:0;bottom:0;opacity:0;transition:all .2s}

.header .gnb .depth_02 {display:none;flex-direction:column;align-items:flex-start;width:440px;position:absolute;top:100%;left:0;padding:24px 0;z-index:4}
.header .gnb .depth_02 li a {gap:0 5px;height:auto;padding:6px 0;opacity:.5}
.header .gnb .depth_02 li a svg {opacity:0}
.header .menu_open,
.side_menu .menu_close {display:flex;align-items:center;justify-content:center;width:var(--header-height);height:var(--header-height);margin-left:40px;z-index:1}

.side_menu {display:none;flex-direction:column;width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:linear-gradient(140deg, rgba(84,79,79,.4), rgba(84,79,79,.1));backdrop-filter:blur(40px);}
.side_menu .menu_head .wrapper {display:flex;align-items:center;justify-content:space-between;max-width:1720px;height:var(--header-height)}
.side_menu .menu_head .logo {display:flex;align-items:center;width:295px;height:100%;z-index:1}
.side_menu .inner {display:flex;flex-direction:column;align-items:center;flex:1;overflow-y:auto;padding:95px 0;-ms-overflow-style: none;}
.side_menu .inner::-webkit-scrollbar {display:none}
.side_menu .inner .wrapper {width:fit-content}
.side_menu .menu,
.side_menu .menu li {display:flex;flex-direction:column;align-items:center;justify-content:center;}
.side_menu .menu li a {text-align:center;font-size:110px;font-weight:800;color:var(--white)}
.side_menu .menu > li {transition:all .2s}
.side_menu .menu > li + li {margin-top:50px}
.side_menu .menu > li > a {text-transform:uppercase;}
.side_menu .menu > li.opacity {opacity:.2}
.side_menu .depth_02 {margin-top:20px}
.side_menu .depth_02 li {transition:all .2s}
.side_menu .depth_02 li a {gap:0 10px;font-size:24px;font-weight:500;padding:6px 0}
.side_menu .depth_02 li a svg {margin-left:5px}

.float_area {display:flex;align-items:flex-end;flex-direction:column;gap:15px;position:fixed;bottom:60px;right:40px;z-index:100}
.float_area .btn_kakao {display:flex;align-items:center;gap:0 10px;background:#FFE100;border-radius:40px;color:#111111;font-size:16px;font-weight:700;padding:10px 20px;position:relative;z-index:3}
.float_area .go_top {display:none;align-items:center;justify-content:center;width:50px;height:50px;backdrop-filter:blur(20px);border:solid 1px rgba(255,255,255,.2);border-radius:50px}
.iq_swiper {width:320px;height:124px}
.iq_swiper .swiper-slide {opacity:0;transition:all .2s}
.iq_swiper .swiper-slide .item {display:inline-flex;align-items:center;height:60px;background:var(--black);border:solid 1px rgba(255,255,255,.25);border-radius:10px;padding:0 30px;font-size:16px;font-weight:500;color:var(--white);transition:all .2s/*box-shadow:0 4px 30px rgba(0,147,255,.2)*/;position:relative}
.iq_swiper .swiper-slide-next {opacity:1}
.iq_swiper .swiper-slide-next .item::before {content:'';display:block;width:46px;height:49px;background:url('../img/web/float_02.png') no-repeat center/100%;position:absolute;left:-28px;top:-30px}
.iq_swiper .swiper-slide .item p {line-height:1.2}
.iq_swiper .swiper-slide-active {opacity:.6}
.iq_swiper .swiper-slide-active .item {height:52px;font-size:14px}

/* 푸터 */
.footer {background:#001024;padding:130px 0 80px;color:rgba(255,255,255,.7);font-size:18px}
.footer .wrapper {display:grid;grid-template-columns:auto 250px;max-width:1720px}
.footer .div_01,
.footer .div_02 {border-bottom:solid 1px rgba(255,255,255,.15);padding-bottom:40px;margin-bottom:40px}
.footer .top a {display:block;width:fit-content;color:inherit;position:relative;transition:all .2s}
.footer .top a::before {content:'';display:block;width:140px;height:140px;background:url('../img/web/ft_cursor.svg') no-repeat center/100%;position:absolute;bottom:15%;left:99%;opacity:0;transition:all .4s}

.footer .top p {font-size:24px;font-weight:500}
.footer .top .txt {display:block;font-size:64px;font-weight:800;line-height:1.4;color:rgba(255,255,255,.8);margin-top:16px}
.footer .info {max-width:890px;display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:60px}
.footer .info .item strong {color:rgba(255,255,255,.8);margin-right:12px}
.footer .div_02 {display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;}
.footer .sns_link {display:flex;align-items:center;gap:0 24px}
.footer .sns_link li a {display:block;opacity:.5;transition:all .2s}
.footer .go_top {transition:all .4s}
.footer .term_link {display:flex;align-items:center;justify-content:flex-end;gap:0 24px}
.footer .term_link li:first-child {font-weight:600}
.footer .term_link a {color:inherit}

@media (hover: hover) {
  .btn_primary:hover {border-color:var(--primary)}
  .btn_primary:hover::before {opacity:1}
  
  .header:hover {background:linear-gradient(140deg, rgba(84,79,79,.4), rgba(84,79,79,.1))}
  .header:hover .bg {height:var(--header-height)}
  .header:hover .bg::before {content:'';display:block;width:100%;height:1px;background:rgba(255,255,255,.15);position:absolute;top:var(--header-height);left:0}
  .header .gnb >ul>li:hover>a::before {opacity:1}
  .header .gnb >ul>li:hover .depth_02 {display:flex}
  .header .gnb .depth_02 li a:hover {opacity:1}
  .header .gnb .depth_02 li a:hover svg {opacity:1}
  
  .side_menu .menu > li:hover {opacity:1}
  .side_menu .menu > li:hover .depth_02 li {opacity:.4}
  .side_menu .menu > li .depth_02 li:hover {opacity:1}
  
  .footer .top a:hover {color:rgba(255,255,255,.2)}
  .footer .top a:hover .txt {color:rgba(255,255,255,.2)}
  .footer .top a:hover .line_txt {-webkit-text-stroke: 1px rgba(255,255,255,.2);color:transparent !important}
  .footer .top a:hover::before {opacity:1}
  .footer .go_top:hover {transform:translateY(-10px)}
  .footer .sns_link li a:hover {opacity:1}
  .footer .term_link a:hover {text-decoration:underline;}
}

@media all and (max-width: 1199px) {
  :root {
    --sec-padding: 140px;
    --header-height: 64px;
  }
  
  .btn_primary {font-size:15px}
  
  .title_box {margin-bottom:60px}
  .title_box .sub {font-size:20px}
  .title_box .tit {font-size:46px}
  .title_box .small_tit {font-size:36px}
  .title_box .sub .logo {max-width:160px}
  .title_box p {font-size:18px;margin-top:18px}
  
  /* 헤더 */
  .header .wrapper {height:var(--header-height);padding:0 0 0 20px}
  .header .logo,
  .side_menu .menu_head .logo {width:200px}
  .header .gnb {display:none}
  .header .menu_open, .side_menu .menu_close {margin-left:auto}
  
  .side_menu .menu_head .wrapper {padding:0 0 0 20px}
  .side_menu .inner {padding:60px 0}
  .side_menu .menu > li + li {margin-top:35px}
  .side_menu .menu li a {font-size:60px}
  .side_menu .depth_02 li a {font-size:18px}
  
  .float_area {right:30px;bottom:30px}
  .iq_swiper {width:366px;height:106px}
  .iq_swiper .swiper-slide .item {height:52px;font-size:16px}
  .iq_swiper .swiper-slide-active .item {height:42px;font-size:14px}
  .iq_swiper .swiper-slide-next .item::before {width:38px;height:42px;top:-22px;left:-25px}
  
  /* 푸터 */
  .footer {padding:70px 0;font-size:15px}
  .footer .top p {font-size:18px;}
  .footer .top .txt {font-size:48px;margin-top:12px}
  .footer .info {margin-top:40px}
}

@media all and (max-width: 1023px) {
  .footer .wrapper {display:flex;flex-direction:column;align-items:flex-start;padding:0 30px}
  .footer .div_01 {border:0;margin:0;padding:0}
  .footer .div_02 {width:100%;align-items:flex-start;margin-top:30px}
  .footer .div_03 {order:5;margin-top:12px;color:rgba(255,255,255,.5)}
  .footer .sns_link {gap:0 16px}
  .footer .go_top {display:none}
}

@media all and (max-width: 767px) {
  :root {
    --sec-padding: 80px;
  }
  
  .only_mb {display:block}
  .only_pc {display:none}
  
  .btn_primary {font-size:12px;padding:14px 40px}
  
  .line_txt {-webkit-text-stroke:.5px var(--white);color:transparent !important}
  
  .title_box {margin-bottom:40px}
  .title_box .sub {font-size:14px;margin-bottom:12px}
  .title_box .tit {font-size:32px}
  .title_box .small_tit {font-size:24px}
  .title_box .sub .logo {max-width:130px}
  .title_box p {font-size:14px;margin-top:12px}
  
  /* 헤더 */
  .side_menu .inner {padding:40px 0}
  .side_menu .inner .wrapper {width:100%}
  .side_menu .menu, .side_menu .menu li {align-items:flex-start;}
  .side_menu .menu > li {opacity:1}
  .side_menu .menu > li + li {margin-top:24px}
  .side_menu .menu li a {font-size:44px;text-align:left;line-height:1.4}
  .side_menu .depth_02 {margin-top:10px}
  .side_menu .depth_02 li a {font-size:13px;font-weight:normal}
  
  .float_area {right:16px;gap:6px}
  .float_area .btn_kakao {display:flex;align-items:center;justify-content:center;font-size:0;gap:0;padding:0;width:50px;height:50px}
  .float_area .go_top {display:flex}
  .iq_swiper {display:none}
  
  /* 푸터 */
  .footer {padding:44px 0;font-size:12px}
  .footer .top p {font-size:12px;}
  .footer .top .txt {font-size:32px;margin-top:6px}
  .footer .top a::before {display:none}
  .footer .info {margin-top:20px;gap:10px}
  .footer .sns_link li a {width:28px}
  .footer .div_02 {padding-bottom:24px;margin-bottom:24px}
  .footer .info .item strong {margin-right:6px}
}



/* 인덱스 */
.index .title_box .sub {color:var(--white)}
.index .title_box .tit {font-size:54px;font-weight:800}

.index .sec_01 {display:flex;align-items:center;justify-content:center;height:100vh;min-height:800px;background:url('../img/web/index_01_bg.jpg') no-repeat center/cover;text-align:center}
.index .sec_01 .sub {display:block;font-size:36px;font-weight:600;line-height:1.4}
.index .sec_01 .tit {font-size:84px;font-weight:800;margin-top:16px;line-height:1.3}
.index .sec_01 p {font-size:20px;font-weight:700;margin-top:20px}
.index .sec_01 .btn_wrap {margin-top:40px}

.index .sec_combo {background:url('../img/web/index_02_bg.png') no-repeat right top 5%/60%}

.index .sec_02 {padding-bottom:250px}
.index .sec_02 .title_box .sub {margin-bottom:10px}
.index .sec_02 .list .item {opacity:.4;display:flex;align-items:center;justify-content:space-between;gap:16px 20px;position:relative;padding:55px 0;border-top:solid 1px #404040;border-bottom:solid 1px rgba(255,255,255,.7);transition:all .3s}
.index .sec_02 .list .item + .item {margin-top:-1px}
.index .sec_02 .list .item .left {display:flex;align-items:flex-start}
.index .sec_02 .list .item .left .num {flex:70px 0 0;font-size:18px;font-weight:700;color:var(--primary);margin-top:-1px}
.index .sec_02 .list .item .left .sub {display:block;font-size:16px;font-weight:600;line-height:1.3}
.index .sec_02 .list .item .left .tit {display:flex;align-items:flex-start;gap:0 12px;font-size:34px;font-weight:700;line-height:1.3;margin-top:16px}
.index .sec_02 .list .item .left .tit img {opacity:0;transition:all .3s}
.index .sec_02 .list .item .right {font-size:24px;font-weight:600;text-align:right}
.index .sec_02 .list .item .img_wrap {opacity:0;width:320px;position:absolute;top:50%;left:63%;transform:translate(-50%, -50%);transition:all .3s}
.index .sec_02 .list .item:hover {border-color:rgba(255,255,255,.7);z-index:2;opacity:1}
.index .sec_02 .list .item:hover .left .tit img {opacity:1}
.index .sec_02 .list .item:hover .img_wrap {opacity:1}

.index .sec_03 .content {display:flex;align-items:flex-end;justify-content:space-between;gap:0 20px}
.index .sec_03 .swiper-pagination {flex:1;max-width:480px;position:initial;z-index:3}
.index .sec_03 .swiper-pagination-bullet {display:block;margin:0 !important;width:auto;height:auto;border-bottom:solid 1px var(--white);background:none;border-radius:0;text-align:left;opacity:.25;padding:30px 0}
.index .sec_03 .swiper-pagination-bullet .num {display:block;font-size:20px;font-weight:700;color:var(--primary);margin-bottom:30px}
.index .sec_03 .swiper-pagination-bullet .txt {display:block;font-size:28px;font-weight:700}
.index .sec_03 .swiper-pagination-bullet-active {opacity:1}
.index .sec_03 .swiper {width:60%;max-width:880px;overflow:visible;position:relative;margin:0 !important}
.index .sec_03 .swiper::before {content:'';display:block;width:100vh;height:100%;background:#000;position:absolute;right:100%;top:0;z-index:5}
.index .sec_03 .swiper-slide {display:block;height:456px;padding-right:30px}
.index .sec_03 .swiper-slide .inner {display:flex;align-items:flex-end;width:100%;height:100%;background:url('../img/web/index_03_01.jpg') no-repeat center/cover;border-radius:20px;padding:30px}
.index .sec_03 .slide_02 .inner {background-image:url('../img/web/index_03_02.jpg')}
.index .sec_03 .slide_03 .inner {background-image:url('../img/web/index_03_03.jpg')}
.index .sec_03 .swiper-slide .txt_wrap {display:flex;align-items:flex-start;gap:0 24px;font-size:18px}
.index .sec_03 .swiper-slide .txt_wrap .num {color:var(--primary);font-weight:700;margin-top:4px}
.index .sec_03 .swiper-slide .txt_wrap .tit {display:block;font-size:34px;font-weight:700;line-height:1.4;margin-bottom:20px}
/* 스크롤 이벤트 영역: scroll_event */
#scroll_event {min-height: 100vh}
#scroll_event .title_box {margin-bottom: 80px;}
#scroll_event .list {width: 100%;height: 100%;position: relative;max-width: 1430px;min-height: 440px;}
#scroll_event .item {width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1);transition: transform 0.3s ease;will-change: transform;}
/* 스크롤 이벤트 영역: scroll_event */

.index .sec_04 {background:url('../img/web/index_04_bg.png') no-repeat center top 87%/100%;padding:250px 0 300px}
.index .sec_04 .wrapper {display:flex;align-items:flex-start;justify-content:space-between;}
.index .sec_04 .wrapper > .btn_wrap {display:none}
.index .sec_04 .left {max-width:250px}
.index .sec_04 .left .title_box {margin-bottom:50px}
.index .sec_04 .left .btn_wrap {justify-content:flex-start;}
.index .sec_04 .right {width:100%;max-width:900px}

.result_list {display:grid;grid-template-columns:repeat(2, 1fr);gap:20px}
.result_list .item {display:flex;flex-direction:column;border:solid 1px rgba(255,255,255,.2);border-radius:20px;backdrop-filter:blur(10px);background:linear-gradient(140deg, rgba(84,79,79,.1), rgba(84,79,79,.05));padding:30px 40px 40px 30px;position:relative;overflow:hidden;transition:all .2s}
.result_list .item::before {opacity:0;content:'';display:block;width:100%;height:100%;background:linear-gradient(140deg, rgba(61,167,255,.4), rgba(61,167,255,.08));position:absolute;top:0;left:0;transition:all .2s}
.result_list .item:hover {border-color:transparent}
.result_list .item:hover::before {opacity:1}
.result_list .item img {width:80px;position:relative;z-index:2}
.result_list .item .tit {display:block;font-size:20px;font-weight:700;color:var(--primary);text-align:right;margin-top:40px;;position:relative;z-index:2}
.result_list .item > div {font-size:58px;font-weight:700;margin-top:24px;text-align:right;;position:relative;z-index:2}

.index .sec_05 .title_box {margin-bottom:100px}
.index .sec_05 .list {display:flex;gap:35px 40px}
.index .sec_05 .list .item {position:relative;background:linear-gradient(135deg, rgba(224,219,219,.3), rgba(249, 249, 249, .03));border-radius:20px}
.index .sec_05 .list .item:hover {background:linear-gradient(135deg, rgba(61,167,255,.4), rgba(61,167,255,.07));border-radius:0 0 20px 20px}
.index .sec_05 .list .item .mark {display:flex;align-items:center;font-size:22px;font-weight:700;;background:#3DA7FF;border-radius:50px;padding:12px 24px;position:absolute;top:0;left:36px;transform:translateY(-50%)}
.index .sec_05 .list .item .img_wrap {border-radius:20px 20px 0 0;overflow:hidden}
.index .sec_05 .list .item .img_wrap img {margin-top:-1px}
.index .sec_05 .list .item .txt_wrap {padding:40px 34px}
.index .sec_05 .list .item .txt_wrap .tit {display:block;font-size:32px;font-weight:700;line-height:1.4;padding-bottom:24px;margin-bottom:20px;border-bottom:solid 1px rgba(255,255,255,.25)}
.index .sec_05 .list .item .txt_wrap .tag {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.index .sec_05 .list .item .txt_wrap .tag span {display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;border:solid 1px rgba(255,255,255,.25);border-radius:40px;padding:12px 24px}

.index .sec_06 {background:url('../img/web/index_06_bg.png') no-repeat right top/45%;padding:var(--sec-padding) 0}
.index .sec_06 .list {display:flex;align-items:center;gap:30px;}
.index .sec_06 .list .item {position:relative}
.index .sec_06 .list .item .img_wrap {animation:rotate 10s infinite linear;}
.index .sec_06 .list .item .txt_wrap {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;height:100%;position:absolute;top:1%;left:0;text-align:center;padding:20px}
.index .sec_06 .list .item .txt_wrap .tit {font-size:34px;font-weight:700;line-height:1.4;display:block}
.index .sec_06 .list .item .txt_wrap p {font-size:18px}
@keyframes rotate {
  0%{transform: rotate(0)}
  100%{transform: rotate(360deg);}
}

@media (hover: hover) {}

@media all and (max-width: 1399px) {
  .index .sec_02 .list .item .img_wrap {width:260px}
}

@media all and (max-width: 1199px) {
  .index .title_box .tit {font-size:40px}
  
  .index .sec_01 .sub {font-size:25px}
  .index .sec_01 .tit {font-size:60px}
  .index .sec_01 p {font-size:16px}
  
  .index .sec_02 {padding-bottom:180px}
  .index .sec_02 .list .item {padding:40px 0}
  .index .sec_02 .list .item .left .num {flex-basis:40px;font-size:15px}
  .index .sec_02 .list .item .left .sub {font-size:14px}
  .index .sec_02 .list .item .left .tit {font-size:26px;margin-top:14px}
  .index .sec_02 .list .item .right {font-size:18px}
  .index .sec_02 .list .item .img_wrap {width:180px}
  
  .index .sec_03 .swiper-pagination {max-width:340px}
  .index .sec_03 .swiper-pagination-bullet .num {font-size:16px;margin-bottom:16px}
  .index .sec_03 .swiper-pagination-bullet .txt {font-size:20px}
  .index .sec_03 .swiper-slide {height:400px}
  .index .sec_03 .swiper-slide .txt_wrap {font-size:15px}
  .index .sec_03 .swiper-slide .txt_wrap .tit {font-size:28px;margin-bottom:14px}
  
  .index .sec_04 {padding:160px 0}
  .index .sec_04 .wrapper {flex-direction:column;align-items:center;}
  .index .sec_04 .wrapper > .btn_wrap {display:flex;margin-top:100px}
  .index .sec_04 .title_box {text-align:center;}
  .index .sec_04 .left .btn_wrap {display:none}
  
  .result_list .item {padding:20px 28px 28px 20px}
  .result_list .item img {width:60px}
  .result_list .item .tit {font-size:17px}
  .result_list .item > div {font-size:50px;margin-top:16px}
  
  .index .sec_05 .title_box {margin-bottom:70px}
  .index .sec_05 .list {gap:35px 20px}
  .index .sec_05 .list .item .mark {font-size:18px;padding:10px 20px;left:26px}
  .index .sec_05 .list .item .txt_wrap {padding:30px 26px}
  .index .sec_05 .list .item .txt_wrap .tit {font-size:24px;padding-bottom:18px;margin-bottom:18px}
  .index .sec_05 .list .item .txt_wrap .tag {gap:8px}
  .index .sec_05 .list .item .txt_wrap .tag span {font-size:15px;padding:10px 18px}
  
  .index .sec_06 .list {gap:0}
  .index .sec_06 .list .item .txt_wrap {gap:16px}
  .index .sec_06 .list .item .txt_wrap .tit {font-size:30px}
  .index .sec_06 .list .item .txt_wrap p {font-size:15px}
  /*
  */
}

@media all and (max-width: 1023px) {
  .index .sec_02 .list .item {flex-direction:column;align-items:flex-start;}
  .index .sec_02 .list .item .right {text-align:left;padding-left:40px}
  .index .sec_02 .list .item .right p br {display:none}
  .index .sec_02 .list .item .img_wrap {left:auto;right:0;transform:translate(0, -14%)}
}

@media all and (max-width: 767px) {
  .index .title_box .tit {font-size:24px}
  
  .index .sec_01 {min-height:700px}
  .index .sec_01 .sub {font-size:14px}
  .index .sec_01 .tit {font-size:36px}
  .index .sec_01 p {font-size:14px}
  .index .sec_01 .btn_wrap {margin-top:30px}
  
  .index .sec_02 {padding-bottom:125px}
  .index .sec_02 .title_box .tit {font-size:34px}
  .index .sec_02 .list .item {padding:24px 0}
  .index .sec_02 .list .item .left .num {flex-basis:28px;font-size:12px}
  .index .sec_02 .list .item .left .sub {font-size:12px}
  .index .sec_02 .list .item .left .tit {font-size:18px;gap:0 5px;margin-top:10px}
  .index .sec_02 .list .item:hover .left .tit img {width:16px}
  .index .sec_02 .list .item .right {font-size:12px;padding-left:28px}
  .index .sec_02 .list .item .img_wrap {width:110px}
  
  .index .sec_03 .content {flex-direction:column;align-items:flex-start;gap:30px}
  .index .sec_03 .swiper-pagination {max-width:100%;width:100%}
  .index .sec_03 .swiper-pagination-bullet {padding:20px 0}
  .index .sec_03 .swiper-pagination-bullet .num {font-size:12px}
  .index .sec_03 .swiper-pagination-bullet .txt {font-size:16px}
  .index .sec_03 .swiper {max-width:initial;width:300px}
  .index .sec_03 .swiper-slide {height:340px;padding-right:20px}
  .index .sec_03 .swiper-slide .inner {border-radius:10px;padding:20px}
  .index .sec_03 .swiper-slide .txt_wrap {flex-direction:column;gap:10px;font-size:12px}
  .index .sec_03 .swiper-slide .txt_wrap .tit {font-size:20px;margin-bottom:10px}
  
  .index .sec_04 {background-position:bottom -11% center;padding:80px 0}
  .result_list {gap:14px}
  .result_list .item {padding:10px 15px 15px 10px;border-radius:5px}
  .result_list .item img {width:34px}
  .result_list .item .tit {font-size:14px}
  .result_list .item > div {font-size:26px;margin-top:8px}
  
  .index .sec_05 .title_box {margin-bottom:45px}
  .index .sec_05 .list {flex-direction:column;max-width:400px;margin:0 auto}
  .index .sec_05 .list .item {border-radius:15px}
  .index .sec_05 .list .item .mark {font-size:14px;padding:8px 20px;left:16px}
  .index .sec_05 .list .item .img_wrap {border-radius:15px 15px 0 0}
  .index .sec_05 .list .item .txt_wrap {padding:22px 16px}
  .index .sec_05 .list .item .txt_wrap .tit {font-size:18px;padding-bottom:12px;margin-bottom:12px}
  .index .sec_05 .list .item .txt_wrap .tag span {font-size:12px;padding:8px 12px}
  
  .index .sec_06 {background-size:85%;background-position:top 15% right}
  .index .sec_06 .list {flex-direction:column;max-width:300px;margin:0 auto;}
  .index .sec_06 .list .item .txt_wrap {gap:12px}
  .index .sec_06 .list .item .txt_wrap .tit {font-size:24px}
  .index .sec_06 .list .item .txt_wrap p {font-size:12px}
}

@media all and (max-width: 420px) {
  .index .sec_02 .list .item {opacity:1;border-color:rgba(255,255,255,.7)}
  .index .sec_02 .list .item .left {flex-direction:column;}
  .index .sec_02 .list .item .img_wrap {display:none}
  .index .sec_02 .list .item .left .tit img {opacity:1}
  .index .sec_02 .list .item .right {padding:0}
  
  .index .sec_04 {background-size:120%}
}



/* 서비스 */
.sec_top {margin-top:240px;position:relative}
.sec_top .page_tit {width:100%;position:absolute;left:0;top:0;transform:translateY(-50%)}
.sec_top .page_tit h2 {font-size:100px;font-weight:800;line-height:1.1}
.sec_top .img_wrap {height:500px;background:no-repeat center/cover;background-attachment:fixed}

.service_wrap .sec_top .page_tit {transform:translateY(-24%)}
.service_wrap .sec_top .img_wrap {background-image:url('../img/web/sub_top_02.jpg')}

.service_wrap .sec_01 {padding:160px 0 180px}
.service_wrap .sec_01 .top {position:relative}
.service_wrap .sec_01 .title_box {width:100%;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1}
.service_wrap .sec_01 .title_box .sub {font-style:italic;}
.service_wrap .sec_01 .img_wrap {max-width:640px;margin:0 auto}
.service_wrap .sec_01 .img_wrap img {animation:scale 2s infinite alternate ease-in-out}
.service_wrap .sec_01 .line {display:block;width:1px;height:300px;background:var(--white);margin:60px auto}
.service_wrap .sec_01 .bottom p {font-size:36px;font-weight:200;line-height:1.6;text-align:center}
.service_wrap .sec_01 .bottom p strong {font-weight:700}

.service_wrap .sec_02 {padding-bottom:var(--sec-padding)}
.service_wrap .sec_02 .list {display:flex;gap:20px}
.service_wrap .sec_02 .list .item {border-radius:20px;overflow:hidden;position:relative}
.service_wrap .sec_02 .list .item .img_wrap img {transition:all 2s}
.service_wrap .sec_02 .list .item .txt_wrap {display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;top:0;left:0;text-align:center}
.service_wrap .sec_02 .list .item .txt_wrap .tit {display:block;font-size:32px;font-weight:700}
.service_wrap .sec_02 .list .item .txt_wrap p {height:0;overflow:hidden;font-size:20px;font-weight:700;line-height:1.6;position:relative;transition:all .6s}
.service_wrap .sec_02 .list .item .txt_wrap p::before {content:'';display:block;width:50px;height:1px;background:var(--white);position:absolute;top:-40px;left:50%;transform:translateX(-50%)}
.service_wrap .sec_02 .list .item:hover .img_wrap img {transform:scale(1.05)}
.service_wrap .sec_02 .list .item:hover .txt_wrap p {margin-top:80px;height:130px;overflow:visible}

.service_wrap .sec_03 {background:url('../img/web/sv_03_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.service_wrap .sec_03 .item {display:flex;align-items:center;height:440px;border-radius:15px;padding:0 90px;background:no-repeat center/cover}
.service_wrap .sec_03 .item .txt_wrap {width:50%}
.service_wrap .sec_03 .item .txt_wrap .sub {display:block;font-size:18px;font-weight:600;line-height:1.4}
.service_wrap .sec_03 .item .txt_wrap .tit {display:block;font-size:50px;font-weight:700;line-height:1.4;margin:10px 0 20px}
.service_wrap .sec_03 .item .txt_wrap p {font-size:18px}
.service_wrap .sec_03 .item.white .sub {color:#3DA7FF}
.service_wrap .sec_03 .item.white .tit {color:#222222}
.service_wrap .sec_03 .item.white p {color:#444444}
.service_wrap.sv_01 .sec_03 .item_01 {background-image:url('../img/web/sv01_03_01.jpg')}
.service_wrap.sv_01 .sec_03 .item_02 {background-image:url('../img/web/sv01_03_02.jpg')}
.service_wrap.sv_01 .sec_03 .item_03 {background-image:url('../img/web/sv01_03_03.jpg')}
.service_wrap.sv_01 .sec_03 .item_04 {background-image:url('../img/web/sv01_03_04.jpg')}
.service_wrap.sv_01 .sec_03 .item_05 {background-image:url('../img/web/sv01_03_05.jpg')}

.service_wrap.sv_02 .sec_03 .item_01 {background-image:url('../img/web/sv02_03_01.jpg')}
.service_wrap.sv_02 .sec_03 .item_02 {background-image:url('../img/web/sv02_03_02.jpg')}
.service_wrap.sv_02 .sec_03 .item_03 {background-image:url('../img/web/sv02_03_03.jpg')}

.service_wrap.sv_03 .sec_03 .item_01 {background-image:url('../img/web/sv03_03_01.jpg')}
.service_wrap.sv_03 .sec_03 .item_02 {background-image:url('../img/web/sv03_03_02.jpg')}
.service_wrap.sv_03 .sec_03 .item_03 {background-image:url('../img/web/sv03_03_03.jpg')}

.service_wrap .sec_04 {display:flex}
.service_wrap .sec_04 p {font-size:160px;font-weight:700;white-space:nowrap;animation:sliding 40s linear infinite;}
@keyframes sliding {
  0%{transform: translateX(0);}
  100%{transform: translateX(-100%);}
}

@keyframes float {
  from {transform:translateY(0)}
  to {transform:translateY(-10%)}
}
@keyframes scale {
  from {transform:scale(1)}
  to {transform:scale(1.03)}
}

@media (hover: hover) {}

@media all and (max-width: 1499px) {
  .sec_top .page_tit h2 {font-size:80px}
  .service_wrap .sec_top .img_wrap {height:400px}
}

@media all and (max-width: 1199px) {
  .sec_top {margin-top:180px}
  .sec_top .page_tit h2 {font-size:60px}
  .sec_top .img_wrap {height:400px}
  
  .service_wrap .sec_01 {padding:100px 0 110px}
  .service_wrap .sec_01 .line {height:220px;margin:50px auto}
  .service_wrap .sec_01 .bottom p {font-size:24px}
  /*
  */
  
  .service_wrap .sec_02 .list .item .txt_wrap .tit {font-size:28px}
  .service_wrap .sec_02 .list .item .txt_wrap p {font-size:17px}
  .service_wrap .sec_02 .list .item:hover .txt_wrap p {margin-top:50px}
  
  .service_wrap .sec_03 .item {height:340px;padding:0 50px}
  .service_wrap .sec_03 .item .txt_wrap .sub {font-size:15px}
  .service_wrap .sec_03 .item .txt_wrap .tit {font-size:36px}
  .service_wrap .sec_03 .item .txt_wrap p {font-size:15px}
  
  .service_wrap .sec_04 p {font-size:120px}
}

@media all and (max-width: 1023px) {
  .service_wrap .sec_02 .list {flex-direction:column;gap:16px;max-width:400px;margin:0 auto}
  .service_wrap .sec_02 .list .item .img_wrap {height:400px}
  .service_wrap .sec_02 .list .item .img_wrap img {width:100%;height:100%;object-fit:cover}
  .service_wrap .sec_02 .list .item .txt_wrap p::before {top:-25px}
}

@media all and (max-width: 767px) {
  .sec_top {margin-top:136px}
  .sec_top .page_tit h2 {font-size:42px}
  .sec_top .img_wrap {background-size:200%;background-position:top 11% center;height:320px}
  .service_wrap .sec_top .img_wrap {height:320px}
  .service_wrap .title_box {text-align:center}
  
  .service_wrap .sec_01 {padding:40px 0}
  .service_wrap .sec_01 .line {height:150px;margin:40px auto}
  .service_wrap .sec_01 .bottom p {font-size:15px}
  
  .service_wrap .sec_02 .list .item .txt_wrap .tit {font-size:24px}
  .service_wrap .sec_02 .list .item .txt_wrap p {height:auto;overflow:visible;font-size:14px;margin-top:50px}
  .service_wrap .sec_02 .list .item:hover .txt_wrap p {height:auto}
  
  .service_wrap .sec_03 {background-size:180%;background-position:top left 76%}
  .service_wrap .sec_03 .list {max-width:343px;margin:0 auto}
  .service_wrap .sec_03 .list .item {align-items:flex-end;height:440px;padding:34px 30px;}
  .service_wrap .sec_03 .list .item .txt_wrap {width:100%}
  
  .service_wrap.sv_01 .sec_03 .item_01 {background-image:url('../img/web/sv01_03_01_mb.jpg')}
  .service_wrap.sv_01 .sec_03 .item_02 {background-image:url('../img/web/sv01_03_02_mb.jpg')}
  .service_wrap.sv_01 .sec_03 .item_03 {background-image:url('../img/web/sv01_03_03_mb.jpg')}
  .service_wrap.sv_01 .sec_03 .item_04 {background-image:url('../img/web/sv01_03_04_mb.jpg')}
  .service_wrap.sv_01 .sec_03 .item_05 {background-image:url('../img/web/sv01_03_05_mb.jpg')}
  
  .service_wrap.sv_02 .sec_03 .item_01 {background-image:url('../img/web/sv02_03_01_mb.jpg')}
  .service_wrap.sv_02 .sec_03 .item_02 {background-image:url('../img/web/sv02_03_02_mb.jpg')}
  .service_wrap.sv_02 .sec_03 .item_03 {background-image:url('../img/web/sv02_03_03_mb.jpg')}
  
  .service_wrap.sv_03 .sec_03 .item_01 {background-image:url('../img/web/sv03_03_01_mb.jpg')}
  .service_wrap.sv_03 .sec_03 .item_02 {background-image:url('../img/web/sv03_03_02_mb.jpg')}
  .service_wrap.sv_03 .sec_03 .item_03 {background-image:url('../img/web/sv03_03_03_mb.jpg')}
  
  .service_wrap .sec_03 .item .txt_wrap .sub {font-size:12px}
  .service_wrap .sec_03 .item .txt_wrap .tit {font-size:24px;margin:10px 0 16px}
  .service_wrap .sec_03 .item .txt_wrap p {font-size:12px}
  
  .service_wrap .sec_04 p {font-size:80px}
}

@media all and (max-width: 359px) {
  .sec_top .page_tit h2 {font-size:36px}
}



/* 컨택트 */
.contact .wrapper {max-width:1540px}
.contact .sec_top .img_wrap {background-image:url('../img/web/sub_top_04.jpg')}

.contact .sec_01 {padding-top:var(--sec-padding)}
.contact .sec_01 .title_box {margin:0}

.contact .sec_02 {padding-top:calc(var(--sec-padding) * 0.7)}
.contact .form_wrap {display:grid;grid-template-columns:repeat(2, 1fr);gap:40px 20px;background:linear-gradient(140deg, rgba(84,79,79,.2), rgba(84,79,79,.05));padding:60px 80px;border-radius:20px}
.contact .form_wrap .col2 {grid-column:span 2}
.contact .form_wrap .form_tit {font-size:32px;font-weight:600}
.contact .form .item .tit {display:block;font-size:18px;font-weight:600;margin-bottom:14px}
.contact .form .btn_wrap {margin-top:40px}
.contact .form .btn_primary {background:transparent}
.form .input_box input,
.form .txtarea_box textarea {width:100%;height:60px;background:#222222;border-radius:10px;font-size:17px;padding:0 20px;border:solid 1px transparent;transition:all .2s}
.form .txtarea_box textarea {height:200px;padding:20px;line-height:1.5}
.form .input_box input:focus,
.form .txtarea_box textarea:focus {border-color:var(--primary)}
.form .term_wrap {border-top:solid 1px #535353;padding-top:40px}
.form .term_box {width:100%;height:200px;background:#222222;border-radius:10px;font-size:17px;padding:20px;color:rgba(255,255,255,.5);border:solid 1px transparent;overflow-y:auto;}
.form .chk_box {margin-top:20px}
.form .chk_box input {display:none}
.form .chk_box label {display:block;font-size:18px;font-weight:600;padding-left:28px;position:relative;cursor:pointer}
.form .chk_box label::before {content:'';display:block;width:18px;height:18px;border:solid 1px rgba(255,255,255,.7);border-radius:4px;position:absolute;top:2px;left:0}
.form .chk_box input:checked + label::before {background:url('../img/web/check.svg') no-repeat center/100%}

.contact .sec_03 {padding-top:calc(var(--sec-padding) * 0.7)}
.contact .sec_03 .top {display:flex;align-items:center;gap:30px 40px}
.contact .sec_03 .top .map_area {width:100%;max-width:1000px;border-radius:20px;overflow:hidden}
.contact .sec_03 .top .map_area .cont {display:none}
.contact .sec_03 .top .wrap_controllers {display:none}
.contact .sec_03 .top .root_daum_roughmap {width:100% !important}
.contact .sec_03 .top .wrap_map {height:550px}
.contact .sec_03 .right > .tit {display:flex;align-items:center;gap:0 15px;font-size:36px;font-weight:700;}
.contact .sec_03 .right .info {margin-top:100px;line-height:1.4}
.contact .sec_03 .right .info > div + div {margin-top:40px}
.contact .sec_03 .right .info .cont {display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;}
.contact .sec_03 .info {font-size:18px;color:rgba(255,255,255,.7)}
.contact .sec_03 .info strong {color:var(--white);margin-right:12px}
.contact .sec_03 .info strong.tit {display:block;margin-bottom:10px}
.contact .sec_03 .bottom {background:linear-gradient(140deg, rgba(84,79,79,.2), rgba(84,79,79,.05));margin-top:40px;border-radius:20px;padding:50px 80px}
.contact .sec_03 .bottom .info {display:flex;align-items:flex-start;gap:0 50px;justify-content:space-between;}
.contact .sec_03 .bottom .info > div {display:flex;align-items:flex-start;gap:0 20px}
.contact .sec_03 .bottom .info strong.tit {margin-bottom:16px}
.contact .sec_03 .bottom .info ul li {padding-left:14px;position:relative}
.contact .sec_03 .bottom .info ul li + li {margin-top:5px}
.contact .sec_03 .bottom .info ul li::before {content:'-';margin-right:5px;position:absolute;top:0;left:0}

.contact .sec_04 {padding:calc(var(--sec-padding) * 0.7) 0 280px}

.faq_list > ul > li + li {margin-top:10px}
.faq_list button {width:100%;font-size:24px;font-weight:700;background:rgba(255,255,255,.1);border-radius:20px;padding:40px 50px 40px 114px;position:relative;text-align:left;transition:all .2s}
.faq_list button::before,
.faq_list .cont::before {content:'Q.';display:block;position:absolute;top:34px;left:50px;font-size:30px;font-weight:700}
.faq_list button::after {content:'';display:block;width:20px;height:20px;background:url('../img/web/plus.svg') no-repeat center/100%;position:absolute;top:50%;right:40px;transform:translateY(-50%);transition:all .2s}
.faq_list button.on {color:var(--primary)}
.faq_list button.on::after {background-image:url('../img/web/minus.svg')}
.faq_list .cont {display:none;font-size:20px;padding:40px 50px 60px 114px;position:relative}
.faq_list .cont::before {content:'A.';top:36px}
.faq_list .cont p {line-height:1.7}
.faq_list .cont ul {margin-top:20px}
.faq_list .cont li {position:relative;padding-left:14px}
.faq_list .cont li::before {content:'·';display:block;position:absolute;top:0;left:0}

.contact .sec_05 {background:url('../img/web/contact_05_bg.jpg') no-repeat center/cover;background-attachment:fixed;padding:130px 0}
.contact .sec_05 .title_box {margin:0}
.contact .sec_05 .btn_wrap {margin-top:40px}

@media (hover: hover) {
  .faq_list button:hover {color:var(--primary)}
}

@media all and (max-width: 1199px) {
  .contact .form_wrap {border-radius:15px;gap:30px 20px;padding:40px}
  .contact .form_wrap .form_tit {font-size:26px}
  .contact .form .item .tit {font-size:16px}
  .form .input_box input {height:50px;padding:0 20px;font-size:16px}
  .form .term_box {font-size:14px}
  
  .contact .sec_03 .info {font-size:16px}
  .contact .sec_03 .right > .tit {font-size:30px}
  .contact .sec_03 .right .info {margin-top:60px}
  .contact .sec_03 .right .info > div + div {margin-top:32px}
  .contact .sec_03 .bottom {padding:30px}
  .contact .sec_03 .top .wrap_map {height:400px !important}
  
  .contact .sec_04 {padding-bottom:160px}
  
  /* faq */
  .faq_list button {font-size:20px;border-radius:12px;padding:30px 50px 30px 70px}
  .faq_list button::before,
  .faq_list .cont::before {font-size:24px;top:26px;left:30px}
  .faq_list .cont {font-size:17px;padding:28px 50px 34px 70px}
}

@media all and (max-width: 1023px) {
  .contact .sec_03 .top {flex-direction:column;align-items:flex-start}
  .contact .sec_03 .top .map_area {max-width:100% !important}
  .contact .sec_03 .bottom .info {flex-direction:column;gap:30px}
  .contact .sec_03 .bottom .info > div img {width:34px}
  .contact .sec_03 .bottom .info strong.tit {margin-bottom:12px}
}

@media all and (max-width: 767px) {
  .contact .sec_top .img_wrap {background-position:right center}
  .contact .form_wrap {display:flex;flex-direction:column;border-radius:10px;gap:20px;padding:34px 16px}
  .contact .form_wrap .form_tit {font-size:20px}
  .contact .form .item .tit {font-size:14px}
  .contact .form .btn_wrap {margin-top:24px}
  .form .input_box input {height:40px;border-radius:5px;padding:0 16px;font-size:14px}
  .form .txtarea_box textarea {height:150px;border-radius:5px;padding:16px;font-size:14px}
  .form .term_box {height:150px;font-size:12px}
  .form .chk_box label {font-size:14px}
  
  .contact .sec_02,
  .contact .sec_03 {padding-top:86px}
  .contact .sec_03 .info {font-size:14px}
  .contact .sec_03 .right > .tit {font-size:24px}
  .contact .sec_03 .right > .tit img {width:18px}
  .contact .sec_03 .right .info {margin-top:20px}
  .contact .sec_03 .right .info > div + div {margin-top:24px}
  .contact .sec_03 .bottom {padding:20px 16px;border-radius:10px}
  .contact .sec_03 .top .map_area {border-radius:10px}
  .contact .sec_03 .top .wrap_map {height:240px !important}
  .contact .sec_03 .bottom {margin-top:30px}
  
  .contact .sec_04 {padding:86px 0 40px}
  
  /* faq */
  .faq_list button {font-size:13px;border-radius:5px;padding:20px 40px 20px 42px}
  .faq_list button:hover {color:inherit}
  .faq_list button::before,
  .faq_list .cont::before {font-size:18px;left:13px;top:16px}
  .faq_list button::after {right:15px;width:12px}
  .faq_list .cont {font-size:14px;padding:24px 0 24px 44px}
  .faq_list .cont::before {top:23px}
  
  .contact .sec_05 {padding:86px 0}
  .contact .sec_05 .btn_wrap {margin-top:24px}
}




/* 어바웃 */
.about_wrap .wrapper {max-width:1540px}
.about_wrap .sec_top .img_wrap {background-image:url('../img/web/sub_top_01.jpg')}

.about_wrap .sec_01 {position:relative;padding:160px 0 150px}
.about_wrap .sec_01 .title_box {width:100%;margin:0;position:absolute;top:43%;left:50%;transform:translateX(-50%);z-index:1;padding:0 20px}
.about_wrap .sec_01 .title_box .tit .square {border:solid 1px var(--white);border-radius:5px;padding:12px 24px}
.about_wrap .sec_01 .canvas_wrap {max-width:1200px;width:100%;aspect-ratio:16/9;margin:0 auto}
.about_wrap .sec_01 #canvasOne {display:block;width:100%;height:100%;}

.about_wrap .sec_combo {background:url('../img/web/about_02_bg.png') no-repeat left top 5%/55%}
.about_wrap .sec_02 .inner {display:flex;align-items:center;justify-content:space-between;font-size:40px;font-weight:700}
.about_wrap .sec_02 .img1 {width:52.2%}
.about_wrap .sec_02 .img2 {width:35%}
.about_wrap .sec_02 .cont > p {font-size:40px;font-weight:700;text-align:center;margin-top:40px}

.about_wrap .sec_03 {padding:var(--sec-padding) 0 calc(var(--sec-padding)/2)}
.about_wrap .sec_03 .list {display:grid;grid-template-columns:repeat(2, 1fr);gap:200px 74px}
.about_wrap .sec_03 .list .item:nth-child(even) {margin-top:386px}
.about_wrap .sec_03 .item .title_box {margin-bottom:100px}
.about_wrap .sec_03 .item .title_box ul {margin-top:10px}
.about_wrap .sec_03 .item .title_box ul li {position:relative;padding-left:16px}
.about_wrap .sec_03 .item .title_box ul li::before {content:'-';display:block;position:absolute;top:6px;left:0}
.about_wrap .sec_03 .item .title_box ul li + li {margin-top:4px}
.about_wrap .sec_03 .item .title_box p {margin:0;font-size:20px}
.about_wrap .sec_03 .item .img_wrap {max-width:330px;margin-left:110px}

.about_wrap .sec_04 {background:url('../img/web/about_04_bg.png') no-repeat center/cover;padding:260px 0}
.about_wrap .sec_04 .list {display:flex;align-items:flex-start;gap:0 38px;overflow:hidden}
.about_wrap .sec_04 .list .arrow {margin-top:120px}
.about_wrap .sec_04 .list .arrow img {width:100%}
.about_wrap .sec_04 .list .item {flex:1;opacity: 1 !important}
.about_wrap .sec_04 .list .item .img_wrap {display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(84,79,79,.2), rgba(84,79,79,.05));border:solid 1px rgba(255,255,255,.25);border-radius:20px;backdrop-filter:blur(30px);padding:54px 0}
.about_wrap .sec_04 .list .item .img_wrap img {width:70%;max-width:167px}
.about_wrap .sec_04 .list .item .txt_wrap {margin-top:24px;text-align:center}
.about_wrap .sec_04 .list .item .txt_wrap .tit {display:block;font-size:24px;font-weight:700}
.about_wrap .sec_04 .list .item .txt_wrap .sub {display:block;font-size:18px;font-weight:700;margin-top:12px;opacity:.8}

.about_wrap .sec_05 {padding:calc(var(--sec-padding)/2) 0 var(--sec-padding)}
.about_wrap .sec_05 .list {display:flex;gap:20px;}
.about_wrap .sec_05 .list .item {border-radius:20px;overflow:hidden;position:relative}
.about_wrap .sec_05 .list .item .img_wrap img {transition:all 1s ease-in-out}
.about_wrap .sec_05 .list .item:hover .img_wrap img {transform:scale(1.05)}
.about_wrap .sec_05 .list .item .txt_wrap {width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;position:absolute;top:0;left:0;z-index:2;padding:0 20px}
.about_wrap .sec_05 .list .item .txt_wrap p {font-size:32px;font-weight:700}


@media all and (max-width: 1399px) {
  .about_wrap .sec_04 .list {gap:0 20px}
}

@media all and (max-width: 1199px) {
  .about_wrap .sec_01 {padding:100px 0}
  .about_wrap .sec_01 .title_box .tit .square {margin:10px 18px}
  
  .about_wrap .sec_02 .cont > p {font-size:30px;margin-top:32px}
  
  .about_wrap .sec_03 .list {gap:100px 40px}
  .about_wrap .sec_03 .list .item:nth-child(even) {margin-top:200px}
  .about_wrap .sec_03 .item .title_box {margin-bottom:70px}
  .about_wrap .sec_03 .item .title_box p {font-size:16px}
  .about_wrap .sec_03 .item .img_wrap {max-width:300px;margin-left:50px}
  .about_wrap .sec_03 .item .title_box ul li::before {top:3px}
  
  .about_wrap .sec_04 {padding:180px 0}
  .about_wrap .sec_04 .list .arrow {margin-top:106px}
  .about_wrap .sec_04 .list .item .txt_wrap .tit {font-size:18px}
  .about_wrap .sec_04 .list .item .txt_wrap .sub {font-size:15px}
  
  .about_wrap .sec_05 .list .item .txt_wrap p {font-size:24px}
}

@media all and (max-width: 1023px) {
  .about_wrap .sec_04 .wrapper {max-width:450px}
  .about_wrap .sec_04 .list {display:flex;flex-wrap:wrap;gap:24px 0}
  .about_wrap .sec_04 .list .arrow {width:54px;padding:0 10px;margin-top:80px}
  .about_wrap .sec_04 .list .arrow.none {display:none}
  .about_wrap .sec_04 .list .item {flex:none;width:calc((100% - 54px)/2)}
  .about_wrap .sec_04 .list .item .img_wrap {padding:32px 0}
  .about_wrap .sec_04 .list .arrow {margin-top:86px}
}

@media all and (max-width: 767px) {
  .about_wrap .title_box {text-align:center}
  .about_wrap .sec_01 {padding:40px 0}
  .about_wrap .sec_01 .title_box .tit .square {display:inline-block;padding:8px 12px;margin-top:6px}
  
  .about_wrap .sec_combo {background-size:120%}
  .about_wrap .sec_02 .wrapper {max-width:450px}
  .about_wrap .sec_02 .inner {flex-direction:column;gap:24px;font-size:32px}
  .about_wrap .sec_02 .img1 {width:100%}
  .about_wrap .sec_02 .img2 {width:100%}
  .about_wrap .sec_02 .cont > p {font-size:20px;margin-top:24px}
  .about_wrap .sec_01 .canvas_wrap {width:160%;margin-left:-30%}
  
  .about_wrap .sec_03 .list {display:flex;flex-direction:column;align-items:center;gap:80px 0}
  .about_wrap .sec_03 .list .item:nth-child(even) {margin:0}
  .about_wrap .sec_03 .item .title_box {margin-bottom:40px}
  .about_wrap .sec_03 .item .title_box p {font-size:12px}
  .about_wrap .sec_03 .item .title_box ul {text-align:left;width:fit-content;margin:12px auto 0}
  .about_wrap .sec_03 .item .title_box ul li::before {top:0}
  .about_wrap .sec_03 .item .img_wrap {margin:0 auto}
  
  .about_wrap .sec_04 {padding:100px 0}
  .about_wrap .sec_04 .list .item {width:calc((100% - 40px)/2)}
  .about_wrap .sec_04 .list .arrow {width:40px;margin-top:20%}
  .about_wrap .sec_04 .list .item .img_wrap {border-radius:10px;padding:22px 0}
  .about_wrap .sec_04 .list .item .txt_wrap {margin-top:12px}
  .about_wrap .sec_04 .list .item .txt_wrap .tit {font-size:13px}
  .about_wrap .sec_04 .list .item .txt_wrap .sub {font-size:12px;margin-top:10px}
  
  .about_wrap .sec_05 .list {flex-direction:column;gap:16px}
  .about_wrap .sec_05 .list .item {border-radius:10px}
  .about_wrap .sec_05 .list .item .txt_wrap p {font-size:20px}
  .about_wrap .sec_05 .list .item .img_wrap {aspect-ratio:16/9;overflow:hidden}
  .about_wrap .sec_05 .list .item .img_wrap img {width:100%;height:100%;object-fit:cover;}
}

@media all and (max-width: 599px) {
  .about_wrap .sec_01 .title_box {top:38%}
}



/* 포트폴리오 */
.portfolio_wrap .sec_top .img_wrap {background-image:url('../img/web/sub_top_03.jpg')}

.portfolio_wrap .sec_01 {padding:var(--sec-padding) 0 calc((var(--sec-padding))*0.75)}
.portfolio_wrap .sec_01 .title_box {margin:0}

.portfolio_wrap .sec_02 .cont {background:url('../img/web/index_04_bg.png') no-repeat center top 78%/100%;padding-bottom:224px}
.portfolio_wrap .sec_02 .result_list {max-width:900px}

.portfolio_wrap .sec_03 {padding-bottom:var(--sec-padding)}
.portfolio_wrap .sec_03 .list {display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
.portfolio_wrap .sec_03 .list > div {border-radius:20px;overflow:hidden}

@media all and (max-width: 1199px) {}

@media all and (max-width: 1023px) {
  .portfolio_wrap .title_box {text-align:center}
  .portfolio_wrap .sec_02 .result_list {margin:0 auto}
  .portfolio_wrap .sec_03 .list {grid-template-columns:repeat(3, 1fr);}
}

@media all and (max-width: 767px) {
  .portfolio_wrap .sec_02 .cont {width:calc(100% + 40px);background-position:center bottom;margin-left:-20px;padding:0 20px 140px}
  .portfolio_wrap .sec_03 {padding:var(--sec-padding) 0}
  .portfolio_wrap .sec_03 .list {grid-template-columns:repeat(2, 1fr);gap:16px}
  .portfolio_wrap .sec_03 .list > div {border-radius:10px}
}