@charset "UTF-8";

@import './font.css';

:root {
  --primary-color: #C61623;
  --secondary-color: #50E3C2;
  --danger-color: #FF5A5F;
  --text-color: #343434;
  --background-color: #F7F9FB;
}
:root{ --accent:#275efe; --bg:#0f1724; --surface:#fff; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, .nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, .nav, section, summary {
  display: block;
}

:lang(ko) {
  font-family: "Pretendard", sans-serif;
}


html, body {
  margin: 0;
  padding: 0;
  word-break: keep-all;
  overflow: auto;
  /*height: 100%;*/
  /*min-height: 100%;*/
  color: #343434;
  font-family: "Pretendard", sans-serif;
}

body {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--background-color);
}

ul, ol, li {
  list-style: none;
}

input, textarea, select, button {
  vertical-align: middle;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
textarea {
  border: solid 1px #DBE1E7;
  padding: 10px;
  border-radius: 4px;
  font-size:15px;
}
legend, caption {
  visibility: hidden;
  position: absolute;
  font-size: 0;
  width: 0;
  height: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}

a[href^=tel] {
  font-style: normal;
}

address, caption, em, var {
  font-style: normal;
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

img {
  vertical-align: top;
}

a {
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:active, a:focus {
  color: #3C5665;
  text-decoration: none;
}

ins {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
}

label, dt, th {
  font-weight: normal;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  text-shadow: none;
  background: none;
  cursor: pointer;
}

button:active span, button:focus span {
  position: relative;
}

button:disabled {
  opacity: 0.2 !important;
  cursor: unset;
}

button:hover:disabled {
  opacity: inherit;
}

strong {
  font-weight: bold;
}

/* Forms */
select {
  min-width: 70px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=date],
input[type=text],
input[type=search],
input[type=tel],
input[type=time],
input[type=password] {
  color: #343434;
  padding: 5px 10px;
  border: solid 1px #DBE1E7;
  border-radius: 4px;
  box-shadow: none;
  -webkit-appearance: none;
  /*background: rgba(0, 0, 0, 0.1);*/
  height:36px;
  font-size:14px;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=date]:focus,
input[type=text]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=time]:focus,
textarea:focus {
  font-weight: 400;
  border: 1px solid #275efe;
  outline: none;
}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
input[type=email]:disabled,
input[type=date]:disabled,
input[type=text]:disabled,
input[type=search]:disabled,
input[type=tel]:disabled,
input[type=time]:disabled,
textarea:disabled {
  opacity: 0.6;
}

input::-ms-input-placeholder {
  color: #908F96;
}

input::-webkit-input-placeholder {
  color: #908F96;
}

input::-moz-placeholder {
  color: #908F96;
}

input:read-only, textarea:read-only {
  opacity: 0.7;
  border: 1px solid #ccc;
  background: #fafafa;
}

input:read-only:focus {
  background: transparent;
  border: 1px solid #353A58;
}

/** scss 컬러값 **/
input[type=radio] {
  display: none;
}

input[type=radio] + label {
  min-width: 22px;
  height: 22px;
  /*background: url(../images/input_radio.svg) no-repeat left center;*/
  cursor: pointer;
  display: flex;
}

input[type=radio]:checked + label {
  /*background: url(../images/input_radioed.svg) no-repeat left center;*/
  display: flex;
  color: var(--primary-color);
  font-weight: 600;
}

input[type=radio] + label span {
  padding: 0 0 0 27px;
  width: auto;
  display: flex;
  line-height: 1.6;

}

input[type=radio] + label span:hover {
  opacity: 1;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  min-width: 22px;
  height: 22px;
  /*background: url(../images/input_unchecked.svg) no-repeat left center;*/
  cursor: pointer;
  display: flex;
}

input[type=checkbox]:checked + label {
  /*background: url(../images/input_checked.svg) no-repeat left center;*/
  display: flex;
}

input[type=checkbox] + label span {
  padding: 0 0 0 28px;
  width: auto;
  display: flex;
  align-items: center;
  opacity: 1;
}

input[type=checkbox] + label span:hover {
  opacity: 1;
}
input[type=checkbox]:checked + label span{
  opacity: 1;
  color:var(--primary-color);

}

body {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3em;
}


/* 흐름 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.center {
  text-align: center;
}
.align_left{text-align:left !important;}

select {
  padding: 0 35px 0 10px;
  /* 여백으로 높이 설정 */
  color: #343434;
  height: 36px;
  background: url("../images/ico_arrow_down.svg") no-repeat calc(100% - 5px) center #ffffff;
  /* 네이티브 화살표를 커스텀 화살표로 대체 */
  border: 1px solid #DBE1E7;
  border-radius: 4px;
  /* iOS 둥근모서리 제거 */
  -webkit-appearance: none;
  /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;
  outline-style: none;
}

select::-ms-expand {
  /* for IE 11 */
  display: none;
}

select option {
  background: #21202D;
  border: 1px solid #353A58;
  color: #EBEEFF;
}

select option:hover {
  background: #000000;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

.chk_multi + label {
  min-width: 16px;
  height: 30px !important;
  /*background: url(../images/input_checked.svg) no-repeat 0 center;*/
  cursor: pointer;
  display: inline-block;
}

.chk_multi:checked + label {
  min-width: 16px;
  height: 30px !important;
  cursor: pointer;
  display: inline-block;
}

.chk_multi + label span {
  padding: 0 0 0 25px !important;
  width: auto;
  display: inline-block;
}
header {
  position:fixed;
  display: flex;
  width: 100%;
  height: 80px;
  z-index: 100;
  padding: 0 20px;
  justify-content: center;
  transition: background-color 0.3s ease; /* 부드러운 전환 */
  background-color: transparent; /* 초기값 투명 */
}
header.scrolled {
  background-color: rgba(255, 255, 255, 0.1); /* 스크롤 후 배경색 */
  backdrop-filter: blur(10px); /* 배경 블러 효과 (선택) */
}
header.scrolled .logo{background: url("../images/logo_livrio.svg") no-repeat center; background-size: 100%;}
header.scrolled .gnb ul > li > a{color:#21202D;}
header.scrolled .gnb ul > li > a:hover{
  color: #C61623;
  opacity: 1;
  border-bottom: 2px solid #C61623;
}

header.scrolled .side_menu a{background: #fafafa; border: 1px solid #999;}
header.scrolled .side_menu a:hover{border:1px solid #C61623;}

header .wrap{display: flex; padding:40px 0; width:100%; max-width:1280px; justify-content: space-between; align-items: center;}
header .logo {
  width: 80px;
  height: 100px;
  background: url(../images/logo_livrio_w.svg) no-repeat center;
  background-size: 100%;
  text-indent: -1000px;
  overflow: hidden;
  display: flex;
}


header .gnb{display: flex; align-items: center;}
header .gnb ul{display:flex; width:100%; }
/*#header .gnb ul > li{width:16%}*/
header .gnb ul > li > a{margin:0 10px; padding:10px 25px; width:100%; height:80px; display: flex; align-items: center; justify-content: center; color:#ffffff; font-size:clamp(16px,3.6vw,20px); font-weight: 600}
header .gnb ul > li > ul{ width:100%; background:#fff; z-index: 102; display: flex; flex-wrap: wrap ;}

header .router-link-active,
header .gnb ul > li> a:hover {color:#fff; opacity: 1; border-bottom:2px solid #fff;}

header .side_menu{display: flex; justify-content: center; align-items: center}
header .side_menu a{background:#fff; color:#21202D; display: flex; align-items: center; justify-content: center; padding:10px 20px; border-radius: 4px;}
header .side_menu a:hover{background:var(--primary-color); color:#fff; transition: all 0.3s ease;}

.scrolled  .menu_btn span{background:#21202D;}

/* 햄버거 버튼 */
.menu_btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.menu_btn span {
  display: block;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s;
}
.menu_btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 7px);
}
.menu_btn.active span:nth-child(2) {
  opacity: 0;
}
.menu_btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -7px);
}


footer {
  width: 100%;
  background: #fff;
  border-top:1px solid #eee;
  justify-content: center;
}
footer .wrap{width:100%; max-width:1280px; padding:40px 20px 0 20px; display: flex; justify-content: space-between; flex-wrap: wrap; color:#666; font-size:14px;}
.copyright{padding-bottom: 40px; background: #fff;}
  /* Hero wrapper */
.hero{max-width:100%; height:100vh;}
.key_visual{flex-direction: column; position: relative;}
.key_visual .wrap{width:100%; max-width:1280px;  }
.key_visual h2{margin-top:60px; line-height: 1; font-size:clamp(24px,5vw,44px); font-weight: 700; }

.key_visual.company{max-width:100%; height:280px; background: url(../images/bg_company.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}

.key_visual.solution1{max-width:100%; height:280px; background: url(../images/slider_bg01.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}
.key_visual.solution2{max-width:100%; height:280px; background: url(../images/slider_bg02.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}
.key_visual.solution3{max-width:100%; height:280px; background: url(../images/slider_bg03.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}
.key_visual.solution4{max-width:100%; height:280px; background: url(../images/slider_bg04.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}
.key_visual.contact{max-width:100%; height:280px; background: url(../images/bg_contact.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}
.key_visual.service{max-width:100%; height:280px; background: url(../images/slider_bg05.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}

/* Downscroll button styles (inline for easy copy/paste) */
.down-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:1200;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,0.92);color:#0f1724;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.18);cursor:pointer}
.down-btn:focus{outline:3px solid rgba(39,94,254,.18)}
.downscroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.3s;
}

.downscroll:hover {
  background: #555;
  animation: bounceDown 1.5s infinite;
}
@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(8px); /* 살짝 아래로 */
  }
  60% {
    transform: translateX(-50%) translateY(4px); /* 다시 올라옴 */
  }
}
@media (min-width:980px){ .down-btn{bottom:34px} }

/* Slider */
.slider{position:relative;overflow:hidden; height:100%; background: #000;}
.slides{display:flex;transition: transform 0.5s ease;}
.slide{min-width:100%;position:relative;display:block;outline:none}


/* image container gives parallax movement */
.slide__media{height:100vh;min-height:320px;overflow:hidden;position:relative; display: flex; align-items: center; justify-content: center; opacity: 0.7;}
.slide__img{position:relative; min-width:100%;height:100vh;}

.slide_img1{background: url("../images/slider_bg01.jpg") no-repeat center; background-size: cover; animation: bgZoom 10s ease-in-out infinite alternate;}
.slide_img2{background: url("../images/slider_bg02.jpg") no-repeat center; background-size: cover; animation: bgZoom 10s ease-in-out infinite alternate;}
.slide_img3{background: url("../images/slider_bg03.jpg") no-repeat center; background-size: cover; animation: bgZoom 10s ease-in-out infinite alternate;}
.slide_img4{background: url("../images/slider_bg04.jpg") no-repeat center; background-size: cover; animation: bgZoom 10s ease-in-out infinite alternate;}

/* caption */
.slide__caption{position:absolute;left:50%;top:25%;  transform: translateX(-50%);color:var(--surface);text-shadow:0 6px 20px rgba(0,0,0,.45)}
.slide__title{font-size:clamp(26px,3.6vw,50px);margin:0 0 16px; line-height: 1.2; font-weight:600; text-align: center;}
.slide__desc{font-size:clamp(14px,1.6vw,18px);margin:0; text-align: center; line-height: 1.3}

.btn_wrap{display: flex; align-content: center; justify-content: center; gap: 12px; margin-top: 30px;}
/* controls */
.controls{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}

.btn_slide{pointer-events:auto;color:var(--surface);width:44px;height:44px;border-radius:8px;margin:0 15px;display:flex;align-items:center;justify-content:center;cursor:pointer; font-size:40px;}
.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.35);cursor:pointer}
.dot.active{width:20px; border:2px solid #fff; background: transparent;}

.btn_primary, .btn_outline{padding:12px 36px; border-radius:4px; font-weight:600; text-decoration:none; display:inline-block; text-align:center; transition:background 200ms,color 200ms, border-color 200ms; cursor:pointer;}
.btn_primary{background:#fff; color:#21202D; font-size:clamp(12px,1.6vw,18px);}
.btn_primary:hover{background:#C61623; color:#fff; border-color: #C61623; box-shadow: 0 4px 12px rgba(198,22,35,.3); }
.btn_outline{font-size:clamp(12px,1.6vw,16px); border:1px solid #fff; color:#fff;}
.btn_outline:hover{color:#fff; background: #C61623; border: 1px solid #C61623;}
/*!* responsive tweaks *!*/
/*@media (min-width:980px){*/
/*  .slide__caption{left:48px;bottom:40px}*/
/*}*/


/* small layout: compact height */
@media (max-width:480px){
  /*.slide__media{height:42vh}*/
  .btn{width:36px;height:36px}
}

.wrap{width:100%; max-width:1280px; margin:0 auto; padding:60px 20px;}
/** 메인 솔루션 **/
#solution .wrap{max-width:1280px; overflow: hidden;}

#solution .wrap ul{display: flex; gap: 1%; width:100%;}
#solution dl{padding:70px 40px; height:450px; border-radius: 10px; flex: 1; transition: all 0.4s ease; cursor: pointer;
  background-position: 100% 100%;}
#solution dt{color:#fff; font-size:clamp(18px,1.6vw,30px); line-height: 1.2; font-weight: 300; margin-bottom: 30px;}

#solution dt b{font-weight: 600;}
#solution dt.over{display: none}
#solution dd{display: none}
#solution .over dt{color:#000; font-size:clamp(12px,2.6vw,36px); line-height: 1; }
#solution .over dt{display: none;}
#solution .over dt.over{display: block}
#solution .over dd{display:block; color:#000; font-size:clamp(12px,1.6vw,18px); line-height: 1.4; margin-top: 12px; font-weight: 300;}
#solution .over{flex:0 0 50%}



#different h2,
#solution h2{font-size:clamp(20px,3vw,42px); font-weight: 600; line-height: 1; margin-bottom: 1.6rem;}

#solution .solution_item1{background:url("../images/main_sol1.svg") #056669 no-repeat; background-position: 100% 100%; background-size: 80%;}
#solution .solution_item1.over{background:url("../images/main_sol1_over.svg") #E9FEFF no-repeat; background-position: right bottom;  background-size: 65%;}
#solution .solution_item2{background:url("../images/main_sol2.svg") #212B4B no-repeat; background-position: 101% 100%; background-size: 80%;}
#solution .solution_item2.over{background:url("../images/main_sol2.svg") #E9FEFF no-repeat; background-position: right bottom;
  background-size: 50%;}
#solution .solution_item3{background:url("../images/main_sol3.svg") #2E2E2E no-repeat; background-position: 100% 100%; background-size: 80%;}
#solution .solution_item3.over{background:url("../images/main_sol3.svg") #E9FEFF no-repeat; background-position: right bottom;
  background-size: 50%;}
#solution .solution_item4{background:url("../images/main_sol4.svg") #57595D no-repeat; background-position: 100% 100%; background-size: 80%;}
#solution .solution_item4.over{background:url("../images/main_sol4.svg") #E9FEFF no-repeat; background-position: right bottom;
  background-size: 50%;}

/*@media (max-width: 410px) {*/
/*  #solution ul{flex-direction: column;gap: 1%;}*/
/*  #solution ul dl{padding:40px; background-size: 40%  !important;; margin-bottom: 20px;}*/

/*}*/


.partner_wrap {
  overflow: hidden;
  width: 100%;
  background: #fff;
}

.partner_slider {
  display: flex;
  width: max-content;
  animation: scroll 100s linear infinite;
}
.partner_slider:hover {
  animation-play-state: paused; /* 마우스오버 시 정지 */
}
.partner_track {
  display: flex;
  gap: 60px;
  margin-right: 60px;
}
.partner_slider img {
  height: 50px;
  flex-shrink: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


#different{ background:#fff; position: relative;}
#different h2{font-size:clamp(24px,3vw,42px); font-weight: 600; line-height: 1; text-align: center;}

#banner h2{font-size:clamp(24px,3vw,42px); font-weight: 600; line-height: 1; margin-bottom: 1.6rem;}
#partner h2{font-size:clamp(24px,2vw,24px); font-weight: 600; line-height: 1; margin-bottom: 3rem;
  text-align: center;background: #fff;
}
#partner{background: #fff}
#partner{background: #fff}
#different ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#different dl{border-radius: 10px; padding:40px; width:49%; background: #EAEFF8; margin-bottom:20px;}
#different dl:nth-child(2n){margin-left: 2%; text-align: right;}
#different dt{font-size:clamp(18px,2vw,26px); line-height: 1; font-weight: 600; margin-bottom: 12px;}
#different dt i{display: block; font-size:clamp(24px,6vw,58px); margin-bottom: 15px;}
#different dd{opacity: .7}
#different .livrio_logo{ position:absolute; left:50%; margin-left:-80px; bottom:35%; width:160px; height:160px; background: url("../images/logo_livrio.png") no-repeat #fff center; background-size: 80%; border-radius: 50%; }

#banner{ padding:80px 0; text-align: center; color:#fff; font-size:clamp(16px,3vw,42px); line-height: 1.2; background: url("../images/bg_banner.jpg") no-repeat center center; background-size: cover; }
#banner h3{font-size:clamp(16px,3vw,32px);}
#banner .btn_more{
  margin-top:40px;
  font-size:clamp(16px,1.6vw,18px);
  background: #fff;
  color: #21202D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 4px;
}

#partner{padding:80px 0; }

.copyright .wrap{padding-top:10px; opacity: .7}
footer li{margin-bottom: 10px; display: flex; align-items: center; gap:10px;}
footer h1{margin-right:20px; font-weight: 600; font-size:clamp(16px,1.6vw,20px); }
footer .btn_go{margin-left:-5px; width:36px; height:36px; border:1px solid #DBE1E5; border-radius: 6px; font-weight: 600;}
.link_instar{display:inline-block; width:42px; height:42px; background: url("../images/sns_instar.svg") no-repeat center; background-size: 80%; overflow: hidden; text-indent: -1000px;}
.link_blog{display:inline-block; width:52px; height:31px; background: url("../images/sns_blog.svg") no-repeat center; background-size: 90%; overflow: hidden; text-indent: -1000px;}
/* 무한 롤링 keyframes */


.company_info .intro{display: flex; margin-bottom:20px;}
.company_info .intro .img_area{width:40%; margin-right:8%;}
.company_info .intro .img_area img{width:100%;}
.company_info .intro ul{margin:10% 0;}
.company_info .intro h3{font-size:clamp(20px, 3.6vw, 42px); line-height: 1; font-weight: 700; margin: 6% 0;}
.company_info .intro p{font-size:clamp(14px, 2vw, 20px); line-height: 1.2; opacity: .8}

.recruit{color:#fff;  background:url("../images/bg_requrit.jpg") #000; background-size: cover; text-align: center;}
.recruit .wrap{padding:80px 0;}
.recruit h3{font-size:clamp(16px,3vw,30px); color:#fff; font-weight: 700; margin-bottom:4%; line-height: 1}
.recruit p{font-size:clamp(16px,1.6vw,20px); color:#fff; font-weight: 300; line-height: 1.2; margin-bottom:2%;}
.recruit p:last-child{margin-bottom: 0;}

.benefits h3{font-size:clamp(16px,3vw,30px); font-weight: 700; margin-bottom:4%; line-height: 1}
.benefits ul{display: flex; gap: 2%; flex-wrap: wrap;}
.benefits ul dl{width:23%; background: #fff; border-radius: 10px; margin-bottom:2%; padding:30px; text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}
.benefits i{width:60px; height:60px; display: block; margin: 20px auto 40px auto; background-size: contain; background-repeat: no-repeat;}
.benefits dt{font-size:clamp(16px,2vw,18px); font-weight: 700; margin-bottom: 10px;}
.benefits dd{font-size:clamp(14px,1.6vw,16px); opacity: .8}

.ico_1{background: url("../images/ico_clock.svg") center center; background-size: contain;}
.ico_2{background: url("../images/ico_coffee.svg") center center; background-size: contain;}
.ico_3{background: url("../images/ico_reflash.svg") center center; background-size: contain;}
.ico_4{background: url("../images/ico_basic.svg") center center; background-size: contain;}
.ico_5{background: url("../images/ico_cheers.svg") center center; background-size: contain;}
.ico_6{background: url("../images/ico_card.svg") center center; background-size: contain;}
.ico_7{background: url("../images/ico_desk.svg") center center; background-size: contain;}
.ico_8{background: url("../images/ico_book.svg") center center; background-size: contain;}

.nav_sol{width:100%; height:56px; background: rgba(33, 32, 45, 0.5); }
.nav_sol ul{display: flex; height:100%; align-items: center; gap:2%;}
.nav_sol ul.wrap{padding:0;}
.nav_sol ul li a{height:100%; display: flex; align-items: center; justify-content: center; padding: 0 20px; font-size:clamp(14px,1.6vw,18px); color: rgba(255, 255, 255, 0.7); cursor: pointer; position: relative; font-weight: 400;}
.nav_sol .router-link-active,
.nav_sol ul li a:hover{height:56px; background: #21202D; color:#fff; font-weight: 600; }
.nav_sol ul.wrap.pc {
  display: flex;
}

.nav_sol ul.wrap.mob {
  display: none;
}

.solution{}
.function{background: #fff;}
.function .wrap{padding-bottom: 0;}
.effect blockquote, .process blockquote,
.function blockquote{font-size: clamp(16px,2vw,20px); font-weight: 600; line-height: 1.4; text-align: center; margin-bottom:0; color:#21202D;}
.effect h3,.process h3, .service h3,
.function h3{font-size: clamp(24px,3.6vw,40px); font-weight: 700; line-height: 1.4; text-align: center; margin-bottom:40px; color:#21202D;}
.effect p,
.function p{font-size: clamp(14px,1.6vw,18px); line-height: 1.4; text-align: center; margin-bottom:20px; color:#21202D; max-width:800px; margin-left:auto; margin-right:auto;}

.solution1 .function_list {margin-top:100px; display: flex; gap: 2%; flex-wrap: wrap; justify-content: space-between; background: url("../images/img_sol_img1.png") no-repeat center bottom; background-size: contain;}
.solution2 .function_list{margin-top:100px; display: flex; gap: 2%; flex-wrap: wrap; justify-content: space-between; background: url("../images/img_sol_img2.png") no-repeat center bottom; background-size: contain;}
.solution3 .function_list{margin-top:100px; display: flex; gap: 2%; flex-wrap: wrap; justify-content: space-between; background: url("../images/img_sol_img3.png") no-repeat center bottom; background-size: contain;}
.solution4 .function_list{margin-top:100px; padding-bottom: 250px; display: flex; gap: 2%; flex-wrap: wrap; justify-content: space-between; background: url("../images/img_sol_img4.png") no-repeat center bottom; background-size: 70%;}

.function_list ul{width:35%;}
.function_list dl{margin-bottom:6vw;}
.function_list dt{text-align: center; font-size: clamp(14px,1.6vw,18px); font-weight: 600; margin-bottom:20px; color:#21202D;}
.function_list dd{text-align: center; font-size: clamp(14px,1.6vw,18px); font-weight: 400; margin-bottom:20px; color:#21202D; opacity: .7; line-height: 1.2}

.solution4 .function_list {width:100%;}
.solution4 .function_list ul{width:100%; display: flex; }
.solution4 .function_list dl{width:25%;}

.effect{background: #F5F5F5;}
.effect_list ul{display: flex; gap:1%; flex-wrap: wrap; justify-content: space-between; margin-top:100px; margin-bottom:30px;}
.effect_list dl{background: #fff; box-shadow: rgba(33, 32, 45, 0.1) 0 0 10px; border-radius: 10px; padding:30px; width:24%;}
.effect_list dt{font-size:clamp(18px,2vw,20px); line-height: 1; font-weight: 600; margin-bottom: 25px;}
.effect_list dt i{display: block; font-size:clamp(24px,6vw,58px); margin-bottom: 25px;}
.effect_list dd{opacity: .7}
.effect_list .image{width:100%}
.effect_list .image img{width:100%;}

.case_study ul{display: flex; gap:1%; flex-wrap: wrap; justify-content: space-between; margin-top:100px; margin-bottom:30px;}
.case_study dl{background: #fff; box-shadow: rgba(33, 32, 45, 0.1) 0 0 10px; border-radius: 10px; padding:3px; width:32%;}
.case_study dt{ padding:30px 30px 0 30px; font-size:clamp(18px,2vw,20px); line-height: 1; font-weight: 600; margin-bottom: 25px;}
.case_study dt i{display: block; font-size:clamp(24px,6vw,58px); margin-bottom: 25px;}
.case_study dd{opacity: .7; padding:0 30px 30px 30px;}
.case_study dd p{margin-bottom: 5px; text-align: left; font-size:clamp(14px,1.4vw,16px);}
.case_study .image{width:100%}
.case_study .image img{width:100%;}

.process{background: #ffffff;}
.process ul{display: flex; gap:1%; flex-wrap: wrap; justify-content: space-between; margin-top:80px; margin-bottom:20px;}
.process li{width:24%; font-size:clamp(14px,2vw,16px); font-weight: 600; margin-bottom: 25px; line-height: 1.2; text-align: center; position: relative;}
.process li i{width:60px; height:60px; display: block; margin: 20px auto; background-size: contain; background-repeat: no-repeat;}
.process .ico_1{background: url("../images/ico_pages.svg") center center; background-size: contain;}
.process .ico_2{background: url("../images/ico_flow.svg") center center; background-size: contain;}
.process .ico_3{background: url("../images/ico_admin.svg") center center; background-size: contain;}
.process .ico_4{background: url("../images/ico_test.svg") center center; background-size: contain;}

.process li::after{content: ""; display: block; width:60px; height:60px; position: absolute; right:-40px; top:30%;
  background: url("../images/process_next.svg") no-repeat center center; opacity: .7}
.process li:last-child::after{display: none;}

.contact{background: #F5F5F5; padding-bottom: 60px;}
.contact .wrap{padding-bottom: 0;}
.contact ul{display: flex; gap:2%;}
.contact dl{background: #fff; box-shadow: rgba(33, 32, 45, 0.1) 0 0 10px; border-radius: 10px; padding:40px 30px; width:32%;}
.contact dt{margin-top:20px; font-size: clamp(14px,1.6vw,18px); line-height: 1.4; color:#21202D; text-align: center}
.contact dd{margin-top:10px; font-size: clamp(16px,1.6vw,20px); line-height: 1.4; color:#21202D; font-weight: 600; text-align: center}
.contact .icon1{padding-top: 120px; background: url("../images/ico_phone.svg")no-repeat center top; background-size: 80px;}
.contact .icon2{padding-top: 120px; background: url("../images/ico_loc.svg")no-repeat center top; background-size: 80px;}
.contact .icon3{padding-top: 120px; background: url("../images/ico_mail.svg")no-repeat center top; background-size: 80px;}

.inquiry{background: #fff;}
.inquiry h3{font-size: clamp(30px,2.6vw,42px); line-height: 1; font-weight: 600; color:#21202D; margin-bottom: 20px;}
.inquiry .wrap{display: flex;}
.inquiry ul{width:50%; padding-right:5%;}

.inquiry ul li{display: flex; align-items: center; margin-bottom:20px;}
.inquiry input{width:100%; margin-bottom: 5px; padding:20px 15px; border:1px solid #eee; border-radius: 5px; font-size: clamp(14px,1.2vw,18px); color:#21202D;}
.inquiry .contact_form{margin-top:40px;}
.contact_form label{margin-top:10px; margin-bottom: 5px; display: flex;}
.inquiry textarea{width:100%; margin-bottom: 5px; padding:20px 15px; border:1px solid #eee; border-radius: 5px; font-size: clamp(14px,1.2vw,18px); color:#21202D;}
.inquiry .btn_submit{display: inline-block; padding:12px 30px; background: #21202D; color:#fff; border-radius: 5px; font-size: clamp(14px,1.2vw,18px); font-weight: 600; margin-top:10px;}
.contact_form .btn_submit{float: right;}


.service{background: #efefef;}
.working_pro h3,
.service h3 {
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 40px;
  color: #21202D;}
.working_pro p,
.service p{
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.4;
  text-align: center;
  margin-bottom: 20px;
  color: #21202D;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.service ul{gap: 1%; display: flex; justify-content: space-between; margin-top:40px;}
.service dl{background: #fff;
  box-shadow: rgba(33, 32, 45, 0.1) 0 0 10px;
  border-radius: 10px;
  padding: 30px;
  width: 32%;}
.service dt{
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1;
  font-weight: 600;
  margin-bottom: 25px;
  text-align: center;
}
.service dd{opacity: .7; text-align: center;}

.service i{width:60px; height:60px; display: block; margin: 20px auto; background-size: contain; background-repeat: no-repeat;}
.service .ico_1{background: url("../images/ico_manage.svg") center center; background-size: contain;}
.service .ico_2{background: url("../images/ico_design.svg") center center; background-size: contain;}
.service .ico_3{background: url("../images/ico_dev.svg") center center; background-size: contain;}

.working_pro{background: #fff}
.working_pro ul{margin-bottom: 10px;}
.working_pro li{display: flex; width:100%; background: #FAFAFA; margin-bottom:20px;}
.working_pro dl{ }

.working_pro .img_wrap{width:50%; height:100%; border:1px solid red;}
.working_pro .img_wrap img{width:100%;}
.service_img1{width:50%; background: url("../images/service_img1.jpg") center center; background-size: cover;}
.service_img2{width:50%; background: url("../images/service_img2.jpg") center center; background-size: cover;}
.service_img3{width:50%; background: url("../images/service_img3.jpg") center center; background-size: cover;}

.working_pro dl{padding:30px 50px; margin-bottom:10px; width:50%;}
.working_pro dt{margin-bottom:30px; line-height: 1; font-size: 30px; font-weight: 600; color:#21202D;}
.working_pro dt i{font-size: 48px; color: rgba(0, 0, 0, 0.1); font-weight: 700; display: flex; line-height: 1.2}
.working_pro dd{opacity: .7}
.working_pro dd p{margin-bottom: 5px; text-align: left; padding-left:12px; position: relative;}
.working_pro dd p:before{content: "•"; display: inline-block; position: absolute; left:0; color:#21202D; font-weight: 600; margin-right: 10px;}


.key_visual.board{max-width:100%; height:280px; background: url(../images/bg_company.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color:#fff; font-size:clamp(18px,4vw,48px); font-weight: 600; text-align: left; padding:0;}
.board .list li{display: flex; padding:35px 0; width:100%; border-bottom:1px solid #efefef;}
.board .list li:first-child{ border-top:1px solid #efefef;}
.board .list a:hover{color:#C61623; text-decoration: underline;}
.board .list .cate{width:110px;}
.board .list .title{flex:1; padding:0 20px; font-size: clamp(14px,1.5vw,18px); line-height: 1.4; font-weight: 600; color:#21202D; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.board .list .date{width:110px;}
.board .board_footer{display:flex; justify-content: center; padding:35px 0;}
.board .board_footer .btn{border:1px solid #21202D; color:#21202D; padding:10px 20px; border-radius: 5px; font-size: clamp(14px,1.2vw,18px); font-weight: 600; background: #fff; display: inline-block;}
.board .board_footer .btn:hover{background: #21202D; color:#fff; transition: all 0.3s;}

.notfound_wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 150px 20px;
  height:100vh;
  font-size: clamp(16px, 2vw, 20px);
  color:#fff;
  background: url("../images/notfound_bg.svg") no-repeat center bottom;
  background-size: cover;
}
.notfound_wrap h2{font-size: clamp(80px, 12.6vw, 200px); line-height: 1; margin-bottom: 50px; font-weight: 700; opacity: .7}
.notfound_wrap p{margin-bottom: 60px; line-height: 1.2; text-align: center;}
.notfound_wrap a{padding:10px 20px; border-radius: 4px; background: #EBEEFF; color:#21202D; font-size: clamp(14px, 2vw, 16px);}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 반응형: 보여지는 배너 크기 조정 */
@media (max-width: 1024px) {
  .partner_slider img { height: 40px; }
  #solution ul{flex-wrap: wrap; gap: 1%;}
  #solution ul dl{padding:40px; height:300px; background-size: 80%; margin-bottom: 20px;}

  .hero{height:420px;}
  .btn_slide{width:22px; height:22px; font-size: 20px;}
  .slide__img{height:100%;}
  .btn_primary, .btn_outline{padding:8px 16px; font-size:14px;}
  .slide__caption{width:80%;}
  .slides{height:100%;}
  /*.contact .wrap{flex-direction: column;}*/
  /*.contact ul{display: flex; gap:2%;}*/
  .contact dl{margin-bottom:10px; background: #fff; box-shadow: rgba(33, 32, 45, 0.1) 0 0 10px; border-radius: 10px; padding:20px; width:100%;}
  .contact .icon1, .contact .icon2, .contact .icon3{background-size: 60px; padding-top:100px;}
  .inquiry .wrap{flex-direction: column;}
  .inquiry ul{width:100%; padding-right:0; margin-bottom: 30px;}

}
@media (max-width: 768px) {
  header .side_menu {
    display: none;
  }

  .gnb {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(33, 32, 45, 1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    z-index: 99;
  }

  .gnb.open {
    max-height: 300px; /* 메뉴 개수에 맞게 조정 */
  }

  .gnb ul {
    flex-direction: column;
    gap: 0;
  }

  .gnb ul li a {
    padding: 15px 20px;
    height: 60px;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  header .gnb ul > li > a {
    height: 60px;
  }

  header.scrolled .gnb ul > li > a {
    color: #fff;
  }

  .menu_btn {
    display: flex;
  }

  .partner_slider img {
    height: 30px;
  }

  #solution ul {
    flex-direction: column;
    gap: 1%;
  }

  #solution ul dl {
    padding: 40px;
    background-size: 40% !important;
    margin-bottom: 20px;
  }

  #different dl {
    width: 100%;
    padding: 30px;
  }

  #different .livrio_logo {
    display: none;
  }

  #different dl:nth-child(2n) {
    margin-left: 0;
    text-align: left;
  }

  #banner h3 {
    padding: 0 30px;
    font-size: 18px;
  }

  .key_visual .wrap {
    padding: 0 20px;
  }

  .key_visual.service,
  .key_visual.contact,
  .key_visual.company {
    height: 160px;
  }

  .key_visual h2 {
    margin-top: 100px;
    font-size: clamp(18px, 5vw, 42px);
  }

  .company_info .intro {
    flex-direction: column;
  }

  .company_info .intro .img_area {
    width: 100%;
    margin: 0
  }

  .key_visual.solution1,
  .key_visual.solution2,
  .key_visual.solution3,
  .key_visual.solution4 {
    height: 220px;
  }

  .nav_sol ul li {
    width: 100%;
  }

  .nav_sol ul li:last-child {
    border-bottom: 1px solid #21202D;
  }

  .nav_sol {
    position: absolute;
    top: calc(100% - 56px);
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(33, 32, 45, 1);
    max-height: 56px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    z-index: 99;
  }

  .nav_sol.open {
    max-height: 300px; /* 메뉴 개수에 맞게 조정 */
  }

  .nav_sol ul {
    flex-direction: column;
    gap: 0;
  }

  .nav_sol ul li a {
    width: 100%;
    height: 60px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 16px;

  }

  /* 햄버거 버튼 */
  .nav_sol_mob {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    display: block;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    transition: 0.3s;
    z-index: 999999;
  }

  .nav_sol_mob::after {
    content: '▾';
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 56px;
    height: 56px;
  }

  .nav_sol_mob.active::after {
    transform: rotate(-180deg);
    color: #fff;
    transition: 0.3s;
  }

  .nav_sol_mob.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 7px);
  }

  .nav_sol_mob.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -7px);
  }

  .nav_sol ul li:hover, .nav_sol ul li.active {
    background: rgba(33, 32, 45, .1);
    color: #fff;
    font-weight: 600;
  }


  .contact .wrap {
    flex-direction: column;
  }

  .contact ul {
    display: flex;
    gap: 2%;
  }

  .contact dl {
    margin-bottom: 10px;
    background: #fff;
    box-shadow: rgba(33, 32, 45, 0.1) 0 0 10px;
    border-radius: 10px;
    width: 100%;
  }

  .contact .icon1, .contact .icon2, .contact .icon3 {
    padding-top: 80px
  }

  .contact dd {
    word-break: break-all;
  }

  .case_study ul {
    flex-direction: column;
  }

  .case_study dl {
    width: 100%;
    margin-bottom: 30px;
  }

  .solution1 .function_list {
    display: flex;
    flex-direction: column;
  }

  .solution2 .function_list {
    padding-bottom: 300px;
    background-size: 50%;
    background-position: center calc(100% - 20px);
  }

  .solution3 .function_list {
    padding-bottom: 240px;
    background-size: 80%;
  }

  .function_list ul {
    width: 100%;
  }

  .solution4 .function_list {
    padding-bottom: 150px;
    background-size: 100%;
  }

  .solution4 .function_list ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .solution4 .function_list dl {
    width: 100%;
    margin-bottom: 0;
  }

  .effect_list ul {
    flex-direction: column;
    gap: 20px;
  }

  .effect_list dl {
    width: 100%;
    margin-bottom: 0;
  }

  .solution1 .function_list {
    background: none;
    padding-bottom: 50px;
  }

  .process ul {
    flex-wrap: wrap
  }

  .process ul li {
    width: 47%;
  }

  .process li::after {
    display: none;
  }

  .service ul {
    flex-direction: column;
    gap: 20px;
  }

  .service dl {
    width: 100%;
  }

  .working_pro ul {
    flex-direction: column;
    gap: 20px;
  }

  .working_pro li {
    flex-direction: column;
    width: 100%;
  }

  .working_pro dl {
    width: 100%;
    padding: 30px;
  }

  .service_img1, .service_img2, .service_img3 {
    width: 100%;
    height: 150px;
  }

  .company_info .benefits dl {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .nav_sol ul.wrap.pc{display: none;}
  .nav_sol ul.wrap.mob{display: block;}
}