@charset "utf-8";
@import url("fonts.css");
@import url("open-color.css");

/* === CSS reset === */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
/* table, caption, tbody, tfoot, thead, tr, th, td, */
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-sizing: border-box;
}
html {
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-tap-highlight-color: transparent;
}
body {
  -webkit-text-size-adjust: none; /*overflow-x:hidden; overflow-y:auto;*/
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}
ul,
ol,
li {
  list-style: none;
}
a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none !important;
  color: inherit;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #f5f5f5;
  margin: 1rem 0;
  padding: 0;
}
img {
  border: 0;
  max-width: 100%;
  vertical-align: middle;
}
em {
  font-style: normal;
}
/*input,*/
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
input,
textarea,
button,
select {
  border-radius: 0;
}
button {
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}
input,
select,
textarea {
  vertical-align: middle;
}
input:required,
input:invalid {
  /*border:0 none;*/
  outline: 0 none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
address,
cite,
dfn,
em,
var {
  font-style: normal;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
embed {
  /*for the damn thouder plugin*/
  display: none;
}

/* === form CSS reset cross browsing === */

select::-ms-expand {
  display: none;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}
input:-moz-submit-invalid {
  box-shadow: none;
}
input:-moz-ui-invalid {
  box-shadow: none;
}

/* === Common === */

:root {
  --color-blue: #0b82c6;
  --color-navy: #0f467c;

  --font-title: "Pretendard", "Noto Sans KR", "AppleGothic", "맑은 고딕",
    "Malgun Gothic", 돋움, Dotum, sans-serif;
  --font-brand: "Outfit", "Spoqa Han Sans Neo", "SUIT", "Pretendard",
    "Noto Sans KR", 돋움, Dotum, sans-serif;
  --font-text: "Pretendard", "Noto Sans KR", "AppleGothic", "맑은 고딕",
    "Malgun Gothic", 돋움, Dotum, sans-serif;
  --font-icon: "Font Awesome 6 free", "xeicon", "Pretendard", "Noto Sans KR",
    돋움, Dotum, sans-serif;

  --transition-slow: all 0.3s ease-in-out;
  --transition-fast: all 0.1s ease-in-out;

  --gutter-lg: 40px;
  --gutter-sm: 20px;
  --mg-sec-100: 100px;
  --mg-sec-080: 80px;
  --mg-sec-050: 50px;
  --mg-sec-030: 30px;
}

html {
  scroll-behavior: smooth; /* -webkit-overflow-scrolling: touch;*/
}
body {
  font-size: 16px;
  color: var(--oc-gray-9);
  font-family: var(--font-text);
  line-height: 1.6;
}
input,
textarea,
button,
select {
  font-size: 16px;
  color: var(--oc-gray-9);
  font-family: var(--font-text);
}
a {
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
a:hover,
a:focus {
  color: #000;
}
button:active,
button:focus {
  outline: none !important;
  box-shadow: none !important;
}
@media all and (max-width: 1200px) {
  body,
  button,
  input,
  optgroup,
  select,
  textarea {
    font-size: 14px;
  }
}

.inner {
  width: 100%;
  max-width: 1440px;
  padding: 0 var(--gutter-lg);
  margin: 0 auto;
  position: relative;
}
.inner.in_full {
  max-width: 100%;
  padding: 0 var(--gutter-lg);
}
.inner.in_800 {
  max-width: 800px;
}
@media all and (max-width: 1200px) {
  .inner,
  .inner.in_full {
    padding: 0 var(--gutter-sm);
  }
}

/* === Component === */

/* color mode */
.mode-dark {
  color: #fff;
}

/* Modal */
body.modal-open {
  padding-right: 0 !important;
}
.modal.fade.show {
  padding-right: 0 !important;
}
.modal.fade h5,
.modal.fade h6 {
  font-family: var(--font-title);
}
.modal.fade .modal-body {
  font-size: 0.9em;
}
.modal.fade .modal-body h6 {
  margin: 1rem 0;
}
.modal.fade .modal-body ol,
.modal.fade .modal-body ol li {
  list-style-type: decimal;
  list-style-position: inside;
}
.modal.fade .modal-body ul,
.modal.fade .modal-body ul li {
  list-style-type: circle;
  list-style-position: inside;
}
.modal.fade .modal-body ol > li > ul {
  margin-left: 1rem;
}
.modal.fade .modal-body ul > li > ol {
  margin-left: 1rem;
}

/* button */
.btn_custom {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1;
  width: auto;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  font-weight: 400;
  color: var(--oc-gray-9);
  font-family: var(--font-title);
  text-align: center;
  white-space: nowrap;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.btn_custom:hover {
  color: #000;
}
.btn_custom.xs {
  height: 1.5rem;
  font-size: 0.8em;
}
.btn_custom.sm {
  height: 2rem;
  font-size: 0.9em;
}
.btn_custom.md {
  height: 2.5rem;
  font-size: 1em;
}
.btn_custom.lg {
  height: 3rem;
  font-size: 1.2em;
}
.btn_custom.rect {
  border-radius: 4px;
  padding: 0 1em;
}
.btn_custom.round {
  border-radius: 3em;
  padding: 0 1em;
}
.btn_custom.txt {
  color: var(--color-blue);
}
.btn_custom.txt:hover {
  color: var(--color-navy);
}
.btn_custom.bd {
  border-color: var(--oc-gray-7);
}
.btn_custom.bd:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.btn_custom.wh {
  border-color: #fff;
  color: #fff;
}
.btn_custom.wh:hover {
  background-color: #fff;
  color: var(--color-navy);
}
.btn_custom.color {
  background-color: var(--color-blue);
  color: #fff;
}
.btn_custom.color:hover {
  background-color: var(--color-navy);
}
.btn_custom.wh.color {
  background-color: #fff;
  color: var(--color-blue);
}
.btn_custom.wh.color:hover {
  color: var(--color-navy);
}
.btn_custom.full {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--gutter-sm);
  padding-bottom: var(--gutter-sm);
  white-space: normal;
}
.btn_custom.full .icon svg {
  width: 2.5rem;
  height: 2.5rem;
}
.btn_custom i {
  font-size: 1.5em;
}
.input-group-append > .btn_custom {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-box {
  margin-top: var(--mg-sec-030);
  text-align: center;
}
@media all and (max-width: 768px) {
  .btn-box {
    margin-top: var(--gutter-sm);
  }
}

/* go-btns */
.go-btns {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.go-btns .btn-go {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  width: 56px;
  background: var(--oc-gray-6);
  color: #fff;
  border-radius: 24px;
  cursor: default;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset,
    rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;
  -webkit-transition: var(--transition-slow);
  transition: var(--transition-slow);
}
.go-btns .btn-go.top {
  font-size: 2em;
  opacity: 0;
}
.go-btns .btn-go.store {
  font-size: 1.5em;
  height: calc(56px * 1.25);
  background: linear-gradient(45deg, var(--color-blue), var(--color-navy));
}
.go-btns .btn-go.catalog {
  font-size: 1.5em;
}
.go-btns .btn-go.kakao {
  font-size: 1.75em; /*background:#FFDE00; color: #231916;*/
}
.go-btns .btn-go:hover {
  background: var(--oc-gray-9);
  cursor: pointer;
}
.go-btns .btn-go.store:hover {
  background: linear-gradient(45deg, var(--color-blue), var(--color-navy));
}
/*.go-btns .btn-go.kakao:hover { background:#FFDE00; }*/
.go-btns.scrolled .btn-go.top {
  opacity: 1;
}
@media all and (max-width: 1200px) {
  .go-btns {
    bottom: 14px;
    right: 14px;
    gap: 4px;
  }
  .go-btns .btn-go {
    height: 44px;
    width: 44px;
    border-radius: 18px;
    font-size: 1.5em;
  }
  .go-btns .btn-go.store {
    height: calc(44px * 1.25);
  }
}

/* form */
.form_custom .form_title {
  margin: var(--mg-sec-050) 0 1rem;
  font-family: var(--font-title);
  font-weight: 600;
}
.form_custom dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter-sm);
  align-items: flex-start;
}
.form_custom dt {
  font-weight: 500;
  padding: 0.25em 0;
}
.form_custom dt.label-required::after {
  content: " *";
  color: var(--color-blue);
}
.form_custom dd {
  flex: 1;
}
.form_custom .option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 1.5em;
}
.form_custom .option li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 5px;
}
.form_custom .option li input,
.form_custom .option li label {
  padding: 0.25em 0;
  cursor: pointer;
}
.form_custom .option li input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.form_custom .full {
  width: 100%;
}
.form_custom .input,
.form_custom .select,
.form_custom .textarea {
  border: 1px solid transparent;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.form_custom .input {
  padding: 0.25em 0.75em;
  background-color: var(--oc-gray-0);
  border-radius: 4px;
}
.form_custom input[type="checkbox"],
.form_custom input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form_custom input[type="checkbox"]::before {
  content: "\ea0e";
  font-family: var(--font-icon);
  vertical-align: -0.1em;
}
.form_custom input[type="radio"]::before,
.filter-prd .form_custom .option li .prd_chk_box::before {
  content: "\e9c6";
  font-family: var(--font-icon);
  vertical-align: -0.1em;
}
.form_custom input[type="checkbox"]:checked::before {
  content: "\e92d";
  color: var(--color-blue);
}
.form_custom input[type="radio"]:checked::before,
.filter-prd .form_custom .option li .prd_chk_box:checked::before {
  content: "\e9c7";
  color: var(--color-blue);
}
.form_custom .select {
  padding: 0.25em 1.25em 0.25em 0.75em; /*border:1px solid var(--oc-gray-3);*/
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  cursor: pointer;
  background-color: var(--oc-gray-0);
  background-image: url("../img/front/bu_select.png");
  background-repeat: no-repeat;
  background-size: 13px 7px;
  background-position: right 0.25em center;
}
.form_custom .textarea {
  padding: 0.25em 0.75em;
  background-color: var(--oc-gray-0);
  border-radius: 4px;
}
.form_custom .input:hover,
.form_custom .select:hover,
.form_custom .textarea:hover {
  border: 1px solid transparent;
  outline: none !important;
  box-shadow: none !important;
}
.form_custom .input:focus,
.form_custom .select:focus,
.form_custom .textarea:focus {
  border: 1px solid var(--color-blue);
  outline: none !important;
  box-shadow: none !important;
  background-color: #fff;
}
.form_custom .list_form > li,
.form_custom .list_form .cate_item {
  padding: 10px;
}
.form_custom .list_form > li + li,
.form_custom .list_form .cate_item + .cate_item {
  border-top: 1px solid var(--oc-gray-3);
}
.form_custom .list_form > li.box {
  border: 1px solid var(--oc-gray-3);
  border-radius: 4px;
}
.form_custom .list_form > li.box .select {
  border: 1px solid transparent;
}
.form_custom .list_form > li.box .select:hover {
  border: 1px solid transparent;
  outline: none !important;
  box-shadow: none !important;
}
.form_custom .list_form > li.box .select:focus {
  border: 1px solid transparent;
  outline: none !important;
  box-shadow: none !important;
}
.form_custom .list_form > li.box + li {
  border-top: none;
}
.form_custom .input::placeholder,
.form_custom .select::placeholder,
.form_custom .textarea::placeholder,
.form-control::placeholder,
.frm_input::placeholder {
  color: var(--oc-gray-5);
}
.input-group .form-control + .btn {
  height: auto;
  display: inline-flex;
  align-items: center;
}
.form_custom.search {
  position: relative;
}
.form_custom.search .autocomplete {
  position: absolute;
  top: 40px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 50dvh;
  z-index: 1;
}
.form_custom.search .autocomplete > div {
  padding: 0.25em 0.75em;
  background-color: var(--oc-gray-0);
  color: var(--oc-gray-7);
  text-align: left;
}
.form_custom.search .autocomplete > div.active {
  background-color: #fff;
  color: #000;
}
.form_custom.search .autocomplete > div:hover {
  background-color: var(--oc-blue-0);
  color: #000;
}
.form_custom.search .autocomplete > div mark {
  color: var(--color-blue);
}

/* tab */
.tab-title {
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.tab-title .tab-nav {
  cursor: pointer;
}
.tab-title .tab-nav.current span {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
}
.tab-title .tab-nav.current span:before {
  color: #fff;
}
.tab-panel {
  width: 100%;
  position: relative;
}
.tab-panel .tab-cont {
  display: none;
  width: 100%;
}
.tab-panel .tab-cont.current {
  display: block;
}

/* list */
.list_keyword {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.list_keyword .key {
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.list_dl {
  margin-bottom: calc(1rem - 0.25rem);
}
.list_dl:after {
  clear: both;
  display: block;
  content: "";
  line-height: 0;
}
.list_dl dt {
  float: left;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.list_dl dd {
  margin: 0;
  margin-bottom: 0.25rem;
}
.list_ul li {
  position: relative;
  text-align: left;
  word-break: keep-all;
  padding-left: 0.75em;
}
.list_ul li + li {
  margin-top: 0.25em;
}
.list_ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50px;
  background: var(--oc-gray-6);
}
.list_ul li em {
  color: var(--color-blue);
  font-style: normal;
}
.list_ul.check li {
  margin-left: 0.75em;
}
.list_ul.check li:before {
  content: "\2714";
  color: var(--oc-gray-6);
  top: 0;
  left: -0.75em;
  width: 1em;
  height: 1em;
  background: none;
}

.list_photo li {
  position: relative;
}
.list_photo li .gall_thumb {
  display: block;
  height: 100%;
}
.list_photo li .img {
  display: inline-block;
  width: 100%;
  position: relative;
  border: 1px solid var(--oc-gray-3);
}
.list_photo li .img img {
  max-width: 100%;
}
.list_photo li .img + .tit {
  margin-bottom: 10px;
}
.list_photo li .gall_thumb .img:before {
  content: "\e9c5";
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "xeicon";
  color: #fff;
  font-size: 4rem;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: var(--transition-fast);
}
.list_photo li .gall_thumb:hover .img:before {
  opacity: 1;
}
#bo_gall .list_photo li .gall_img {
  border-radius: 0 !important;
  border: none;
  margin-bottom: 0;
}

.list_grid {
  display: grid;
  gap: var(--mg-sec-030);
}
.list_grid.col2 {
  grid-template-columns: repeat(2, 1fr);
}
.list_grid.col3 {
  grid-template-columns: repeat(3, 1fr);
}
.list_grid.col4 {
  grid-template-columns: repeat(4, 1fr);
}
.list_grid.col5 {
  grid-template-columns: repeat(5, 1fr);
}
.list_grid.col6 {
  grid-template-columns: repeat(6, 1fr);
}
@media all and (max-width: 1200px) {
  .list_grid.col6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media all and (max-width: 1000px) {
  .list_grid {
    gap: var(--gutter-sm);
  }
}
@media all and (max-width: 768px) {
  .list_grid.col6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-sec-030);
  width: 100%;
}
.flex-wrap.col2 .flex-box {
  width: calc((100% - 30px) / 2);
}
.flex-wrap.col3 .flex-box {
  width: calc((100% - 60px) / 3);
}
.flex-wrap.col4 .flex-box {
  width: calc((100% - 90px) / 4);
}
.flex-wrap.col5 .flex-box {
  width: calc((100% - 120px) / 5);
}
.flex-wrap.col6 .flex-box {
  width: calc((100% - 60px) / 3);
}
.flex-wrap.col9 .flex-box {
  width: calc((100% - 60px) / 3);
}
@media all and (max-width: 1200px) {
  .flex-wrap.col6 .flex-box {
    width: calc((100% - 30px) / 2);
  }
}
@media all and (max-width: 1000px) {
  .flex-wrap {
    gap: var(--gutter-sm);
  }
  .flex-wrap.col2 .flex-box {
    width: calc((100% - 20px) / 2);
  }
  .flex-wrap.col3 .flex-box {
    width: calc((100% - 40px) / 3);
  }
  .flex-wrap.col4 .flex-box {
    width: calc((100% - 60px) / 4);
  }
  .flex-wrap.col5 .flex-box {
    width: calc((100% - 80px) / 5);
  }
  .flex-wrap.col6 .flex-box {
    width: calc((100% - 20px) / 2);
  }
  .flex-wrap.col9 .flex-box {
    width: calc((100% - 40px) / 3);
  }
}
@media all and (max-width: 768px) {
  .flex-wrap.col2,
  .flex-wrap.col3 {
    flex-direction: column;
  }
  .flex-wrap.col2 .flex-box,
  .flex-wrap.col3 .flex-box {
    width: 100%;
  }
  .flex-wrap.col4 .flex-box,
  .flex-wrap.col5 .flex-box,
  .flex-wrap.col9 .flex-box {
    width: calc((100% - 20px) / 2);
  }
}
@media all and (max-width: 540px) {
  .flex-wrap.col6,
  .flex-wrap.col9 {
    flex-direction: column;
  }
  .flex-wrap.col6 .flex-box,
  .flex-wrap.col9 .flex-box {
    width: 100%;
  }
}
@media all and (max-width: 400px) {
  .flex-wrap.col4 {
    flex-direction: column;
  }
  .flex-wrap.col4 .flex-box {
    width: 100%;
  }
}

.grid-wrap {
  display: grid;
  gap: var(--mg-sec-030);
  width: 100%;
}
.grid-box {
  width: 100%;
  box-sizing: border-box;
}
.grid-wrap.col1 {
  grid-template-columns: repeat(1, 1fr);
}
.grid-wrap.col2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-wrap.col3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-wrap.col4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-wrap.col5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-wrap.col6 {
  grid-template-columns: repeat(6, 1fr);
}
.grid-wrap.col7 {
  grid-template-columns: repeat(7, 1fr);
}
.grid-wrap.col8 {
  grid-template-columns: repeat(8, 1fr);
}
.grid-wrap.col9 {
  grid-template-columns: repeat(9, 1fr);
}
@media all and (max-width: 1200px) {
  .grid-wrap.col6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (max-width: 1000px) {
  .grid-wrap {
    gap: var(--gutter-sm);
  }
  .grid-wrap.col2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-wrap.col3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-wrap.col4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-wrap.col5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-wrap.col6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-wrap.col9 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media all and (max-width: 768px) {
  .grid-wrap.col2,
  .grid-wrap.col3 {
    grid-template-columns: 1fr;
  }
  .grid-wrap.col4,
  .grid-wrap.col5,
  .grid-wrap.col9 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (max-width: 540px) {
  .grid-wrap.col6,
  .grid-wrap.col9 {
    grid-template-columns: 1fr;
  }
}

@media all and (max-width: 400px) {
  .grid-wrap.col4 {
    grid-template-columns: 1fr;
  }
}

.list-flex-dl dt {
  width: calc((100% - 20px) / 3);
  border-top: 1px solid var(--oc-gray-3);
  padding-top: 1em;
}
.list-flex-dl dd {
  flex: 1;
}
.list-flex-dl dd ul li .back {
  position: relative;
  display: block;
  padding: 2.5em var(--mg-sec-030);
  margin-bottom: 1rem;
  font-size: 1.5em;
  font-weight: 600;
  background: var(--oc-gray-0) no-repeat center center / cover;
  z-index: 1;
}
.list-flex-dl dd ul li .back:hover {
  color: #fff;
}
.list-flex-dl dd ul li .back::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.7)),
    color-stop(50%),
    to(rgba(0, 0, 0, 0.3))
  );
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7),
    50%,
    rgba(0, 0, 0, 0.3)
  );
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
@media all and (max-width: 768px) {
  .list-flex-dl {
    flex-direction: column;
  }
  .list-flex-dl dt {
    width: 100%;
  }
  .list-flex-dl dd ul li .back {
    padding: 1.5em var(--gutter-sm);
  }
}

/* table */
.table_custom .table.table-bordered {
  border-color: var(--oc-gray-3);
}
.table_custom .table th,
.table_custom .table td {
  text-align: center;
  vertical-align: middle !important;
  word-break: keep-all;
  white-space: normal;
}
.table_custom .table thead th {
  background: var(--oc-blue-5);
  color: #fff;
}
.table_custom .table.table-striped tbody tr:nth-of-type(odd) > * {
  box-shadow: inset 0 0 0 9999px var(--oc-gray-0);
}
.table_custom.table-responsive .table thead tr > :last-child {
  background-color: var(--oc-blue-7);
}
.table_custom.table-responsive
  .table.table-striped
  tbody
  tr:nth-of-type(even)
  > :last-child {
  background: var(--oc-blue-0);
}
.table_custom.table-responsive
  .table.table-striped
  tbody
  tr:nth-of-type(odd)
  > :last-child {
  box-shadow: inset 0 0 0 9999px var(--oc-blue-0);
}
.table_custom .desc {
  display: none;
}
@media all and (max-width: 1000px) {
  .table_custom .desc {
    display: block;
  }
  .table_custom.table-responsive .table {
    min-width: 1000px;
  }
  .table_custom.table-responsive .table tr > :last-child {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
  }
  .table_custom.table-responsive .table thead tr > :last-child {
    font-size: 0;
  }
}

/* round-box */
.round-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--oc-gray-3);
  border-radius: 1em;
  position: relative;
  overflow: hidden;
  -webkit-transition: var(--transition-slow);
  transition: var(--transition-slow);
}
.round-box.padding {
  padding: var(--mg-sec-030);
}
.round-box.circle {
  border-radius: 50%;
}
.round-box .tit {
  margin-bottom: 0.5rem;
}
.round-box .img,
.round-box .icon {
  max-width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0 !important;
  background: transparent;
}
.mode-dark .round-box {
  background-color: transparent;
}
@media all and (max-width: 1200px) {
  .round-box.padding {
    padding: var(--gutter-sm);
  }
}

/* lightbox */
.lb-nav a.lb-prev {
  width: 80% !important;
  margin-left: -50%;
}
.lb-nav a.lb-next {
  width: 80% !important;
  margin-right: -50%;
}
@media all and (max-width: 1000px) {
  .lb-nav a.lb-prev {
    margin-left: 0;
  }
  .lb-nav a.lb-next {
    margin-right: 0;
  }
}

/* video icon */
.video-wrap {
  position: relative;
}
.video-wrap .video-play-trigger {
  cursor: pointer;
}
.video-wrap .btn-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-wrap .btn-wrap .play-btn {
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  background: transparent;
  position: relative;
  cursor: pointer;
  opacity: 0.8;
}
.video-wrap .btn-wrap .play-btn svg {
  width: 36px;
  height: 36px;
}
.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin: var(--gutter-sm) 0;
}
.icon-wrap .icon-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 100px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--oc-gray-0);
  padding: 0.5em;
}
.icon-wrap li:first-child .icon-box {
  background-color: var(--oc-blue-0);
}
.icon-wrap .icon-box img {
  width: 36px;
}
.icon-wrap .icon-box + p {
  margin-top: 0.5em;
  font-weight: 500;
  text-align: center !important;
}
@media all and (max-width: 540px) {
  .icon-wrap {
    flex-wrap: wrap;
    max-width: 220px;
    margin: var(--gutter-sm) auto;
  }
  .video-wrap video {
    width: 100%;
  }
}

/* slider */
.swiper .btn-box {
  position: absolute;
  right: 50%;
  bottom: var(--gutter-sm);
  transform: translateX(50%);
  height: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper .btn-box button {
  display: flex;
  align-items: center;
  color: var(--oc-gray-9);
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.swiper .btn-box .swiper-pagination {
  position: static;
  width: auto;
  font-family: var(--font-title);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin: 0 0.5em;
}
.swiper .btn-box .swiper-pagination .swiper-pagination-current {
  font-weight: 700;
}
.swiper .btn-box .swiper-pagination .swiper-pagination-bullet {
  background: transparent;
  border: 1px solid var(--oc-gray-9);
  border-radius: 8px;
  margin: 0;
  opacity: 1;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.swiper .btn-box .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--oc-gray-9);
  width: 1em;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.swiper .btn-box .swiper-button-next,
.swiper .btn-box .swiper-button-prev {
  position: static;
  background: none;
  width: auto;
  height: auto;
  margin-top: 0;
  color: var(--oc-gray-9);
}
.swiper .btn-box .swiper-button-next:after,
.swiper .btn-box .swiper-button-prev:after {
  display: none;
}
.swiper.mode-dark .btn-box button {
  color: #fff;
}
.swiper.mode-dark .btn-box .swiper-pagination .swiper-pagination-bullet {
  border-color: #fff;
}
.swiper.mode-dark .btn-box .swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
}
.swiper.mode-dark .btn-box .swiper-button-next,
.swiper.mode-dark .btn-box .swiper-button-prev {
  color: #fff;
}
.swiper .btn-box button:hover,
.swiper.mode-dark .btn-box button:hover {
  color: var(--oc-blue-4);
}
.swiper .btn-box .swiper-pagination .swiper-pagination-bullet:hover {
  border-color: var(--oc-blue-4);
}
.swiper .btn-box .swiper-pagination .swiper-pagination-bullet-active:hover {
  background: var(--oc-blue-4);
}
@media all and (max-width: 768px) {
  .swiper .btn-box {
    bottom: 1rem;
  }
}

/* breadcrumb */
.lnb_breadcrumb {
  font-family: var(--font-title);
  align-items: center;
}
.lnb_breadcrumb .breadcrumb {
  margin: 0;
  padding: var(--mg-sec-030) 0;
}
.lnb_breadcrumb .breadcrumb-item,
.lnb_breadcrumb .breadcrumb-item a {
  color: var(--oc-gray-7);
  font-weight: 500;
}
.lnb_breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--oc-gray-7);
  font-weight: 400;
}
.lnb_breadcrumb .breadcrumb-item.active,
.lnb_breadcrumb .breadcrumb-item.active a {
  color: var(--oc-gray-9);
  font-weight: 600;
}
.lnb_breadcrumb .breadcrumb-item.active a:hover {
  color: var(--color-blue);
}
.lnb_breadcrumb svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
}
.lnb_breadcrumb.mode-dark .breadcrumb-item,
.lnb_breadcrumb.mode-dark .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.6);
}
.lnb_breadcrumb.mode-dark .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.6);
}
.lnb_breadcrumb.mode-dark .breadcrumb-item a:hover {
  color: #fff;
}
.lnb_breadcrumb.mode-dark .breadcrumb-item.active,
.lnb_breadcrumb.mode-dark .breadcrumb-item.active a {
  color: rgba(255, 255, 255, 0.8);
}
.lnb_breadcrumb.mode-dark .breadcrumb-item.active a:hover {
  color: #fff;
}
@media all and (max-width: 1000px) {
  .lnb_breadcrumb .breadcrumb {
    margin: 0;
    padding: 1rem 0 var(--mg-sec-030);
  }
}

/* pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--gutter-lg);
}
.pagination .page_num {
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination .btn_page,
.pagination .btn_page_num,
.pagination .text_ellipsis {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  margin: 0 4px;
  font-size: 14px;
  line-height: 1;
  background: #fff;
  font-weight: 400;
  border: 1px solid transparent;
  transition: var(--transition-slow);
}
.pagination .btn_page,
.pagination .text_ellipsis {
  border-color: var(--oc-gray-2);
}
.pagination .btn_page:hover,
.pagination .btn_page_num:hover {
  border-color: var(--oc-gray-5);
}
.pagination .btn_page_num.active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
  font-weight: 600;
}
@media all and (max-width: 1200px) {
  .pagination {
    margin-top: var(--mg-sec-030);
  }
}
@media all and (max-width: 768px) {
  .pagination .page_num {
    margin: 0 2px;
  }
  .pagination .btn_page,
  .pagination .btn_page_num,
  .pagination .text_ellipsis {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    margin: 0 2px;
  }
}

/* more toggle */
.hidden_cont {
  max-height: 550px;
  overflow-y: hidden;
  position: relative;
}
.hidden_cont:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--mg-sec-080);
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.8) 35%,
    rgba(255, 255, 255, 0.02) 100%
  );
}
.visible_cont {
  max-height: auto;
}
.hidden_cont + .btn-box .btn_more:hover,
.visible_cont + .btn-box .btn_more:hover {
  color: var(--color-blue);
}
@media all and (max-width: 1200px) {
  .hidden_cont {
    max-height: 100dvh;
  }
}

/* === Layout === */

#header {
  width: 100%;
  height: var(--mg-sec-080);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid var(--oc-gray-3);
}
#header > .inner {
  display: flex;
  align-items: center;
  gap: var(--gutter-lg);
}
#header #logo {
  height: var(--mg-sec-080);
  padding: 0;
}
#header #logo a {
  display: flex;
  align-items: center;
  height: var(--mg-sec-080);
}
#header #logo a img {
  height: 48px;
}
.nav-gnb.pc .gnb-dep1 {
  display: flex;
}
.nav-gnb.pc .gnb-dep1 .dep1 {
  display: flex;
  align-items: center;
  height: var(--mg-sec-080);
  position: relative;
}
.nav-gnb.pc .gnb-dep1 .dep1:before {
  display: none;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--color-navy);
}
.nav-gnb.pc .gnb-dep1 .dep1:after {
  display: none;
  content: "";
  position: absolute;
  bottom: 0;
  left: -10px;
  width: calc(100% + 20px);
  border-bottom: 2px solid var(--color-navy);
}
.nav-gnb.pc .gnb-dep1 .dep1.current:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--color-blue);
}
.nav-gnb.pc .gnb-dep1 .dep1.current:after {
  border-color: var(--color-blue);
}
.nav-gnb.pc .gnb-dep1 .dep1:hover:before,
.nav-gnb.pc .gnb-dep1 .dep1.current:before,
.nav-gnb.pc .gnb-dep1 .dep1:hover:after,
.nav-gnb.pc .gnb-dep1 .dep1.current:after {
  display: block;
}
.nav-gnb.pc.full .gnb-dep1 .dep1:hover:before {
  display: none;
}
.nav-gnb.pc.full .gnb-dep1 .dep1.current:before {
  display: block;
}
.nav-gnb.pc .gnb-dep1 .dep1 .dep1-link {
  display: flex;
  align-items: center;
  height: var(--mg-sec-080);
  padding: 0 1.25em;
  font-family: var(--font-title);
  font-size: 1.125em;
  font-weight: 500;
}
.nav-gnb.pc .gnb-dep1 .dep1:hover .dep1-link {
  color: var(--color-navy);
}
.nav-gnb.pc .gnb-dep1 .dep1.current .dep1-link {
  color: var(--color-blue);
}
.nav-gnb.pc .menu-tree {
  display: none;
  position: fixed;
  top: var(--mg-sec-080);
  left: 0;
  width: 100%;
  height: auto;
  min-height: 26em;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.nav-gnb.pc .menu-tree.on {
  display: flex;
}
.nav-gnb.pc .menu-tree .menu-tree-main {
  background: #fff;
  padding: 2rem var(--gutter-lg);
  width: 21rem;
  height: inherit;
  display: flex;
  flex-direction: column;
}
.nav-gnb.pc .menu-tree .dep-title {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.5em;
  font-weight: 400;
  color: var(--oc-gray-7);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.nav-gnb.pc .menu-tree .dep-link {
  font-family: var(--font-title);
  color: var(--oc-gray-7);
  margin-top: auto;
}
.nav-gnb.pc .menu-tree .dep-link:hover {
  color: var(--color-navy);
}
.nav-gnb.pc .menu-tree .gnb-dep3 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter-lg);
}
.nav-gnb.pc .menu-tree .dep2:nth-child(2) .gnb-dep3,
.nav-gnb.pc .menu-tree .dep2:nth-child(3) .gnb-dep3,
.nav-gnb.pc .menu-tree .dep2:nth-child(4) .gnb-dep3,
.nav-gnb.pc .menu-tree .dep2:nth-child(6) .gnb-dep3,
.nav-gnb.pc .menu-tree .dep2:nth-child(7) .gnb-dep3,
.nav-gnb.pc .menu-tree .dep2:nth-child(8) .gnb-dep3,
.nav-gnb.pc .menu-tree .dep2:nth-child(9) .gnb-dep3 {
  flex: 1;
  display: block;
}
.nav-gnb.pc .menu-tree .menu-tree-sub {
  display: none;
  position: absolute;
  top: 0;
  left: 21rem;
  width: 100%;
  max-width: calc(100% - 21rem);
  height: 100%;
  padding: 2rem 3em;
  background-color: var(--oc-blue-0);
  gap: var(--gutter-lg);
}
.nav-gnb.pc .menu-tree .menu-tree-sub.on {
  display: flex;
}
.nav-gnb.pc .menu-tree .menu-tree-main .btn-close,
.nav-gnb.pc .menu-tree .menu-tree-sub .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.nav-gnb.pc .menu-tree .menu-tree-sub .gnb-dep3 {
  flex: 1 1 50%;
}
.nav-gnb.pc .menu-tree .menu-tree-sub .menu-tree-img {
  position: relative;
  flex: 1 1 50%;
  max-width: 720px;
  height: 100%;
  overflow: hidden;
}
.nav-gnb.pc .menu-tree .menu-tree-sub .menu-tree-img .img-hover-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center center / cover;
  visibility: hidden;
}
.nav-gnb.pc .menu-tree .gnb-dep2 .dep2 .dep2-link {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 1.25em;
  font-family: var(--font-title);
  color: var(--color-navy);
  font-weight: 600;
  padding: 0.5rem 0;
}
.nav-gnb.pc .menu-tree .gnb-dep2 .dep2.on .btn-menu-tree-sub {
  color: var(--color-blue);
}
.nav-gnb.pc .menu-tree .gnb-dep2 .dep2.on .btn-menu-tree-sub:after {
  content: "\e940";
  font-family: var(--font-icon);
  font-weight: normal;
  margin-left: auto;
}
.nav-gnb.pc .menu-tree .gnb-dep3 .dep3 .dep3-link {
  display: inline-block;
  width: 100%;
  font-size: 1.125em;
  font-family: var(--font-title);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.nav-gnb.pc .menu-tree .gnb-dep4 .dep4 {
  border-bottom: 1px solid var(--oc-gray-3);
}
.nav-gnb.pc .menu-tree .gnb-dep4 .dep4 .dep4-link {
  display: inline-block;
  width: 100%;
  font-size: 1em;
  color: var(--oc-gray-7);
  padding: 0.25em 0;
}
.nav-gnb.pc .menu-tree .gnb-dep4 .dep4 .dep4-link:hover {
  color: var(--color-navy);
}
.nav-gnb.pc .menu-tree .gnb-dep5 .dep5 .dep5-link {
  display: inline-block;
  width: 100%;
  font-size: 0.9em;
  color: var(--oc-gray-7);
  padding: 0.25em 0;
  font-weight: 300;
}
.nav-gnb.pc .menu-tree .gnb-dep5 .dep5 .dep5-link:before {
  content: "- ";
}
.nav-gnb.pc .menu-tree .gnb-dep5 .dep5 .dep5-link:hover {
  color: var(--color-navy);
}
.nav-gnb.pc .menu-tree.full {
  height: calc(100% - var(--mg-sec-080));
}
.nav-gnb.pc .menu-tree.full .dep-link {
  margin-top: var(--mg-sec-050);
}
.nav-gnb.pc .menu-tree.full .menu-tree-main {
  width: 24em;
  height: 100%;
  padding: 3rem var(--gutter-lg);
  position: relative;
}
.nav-gnb.pc .menu-tree.full .menu-tree-sub {
  position: fixed;
  top: var(--mg-sec-080);
  left: 24em;
  width: auto;
  padding: 3rem 4em;
  padding-right: 6rem;
  max-width: calc(100% - 30em);
  height: calc(100% - var(--mg-sec-080));
}
.nav-gnb.pc .menu-tree.full .menu-tree-sub.on {
  display: block;
}
.nav-gnb.pc .menu-tree.full .menu-tree-sub .dep2-link {
  padding-bottom: 1.5rem;
}
.nav-gnb.pc .menu-tree.full .menu-tree-sub .gnb-dep3 {
  flex: auto;
}
.nav-gnb.pc .menu-tree.full .gnb-dep3 .dep3 .dep3-link {
  margin-bottom: 1rem;
}
.nav-gnb.pc .menu-tree.full .gnb-dep4 .dep4 {
  border: none;
}
.nav-gnb.pc .menu-tree.full .gnb-dep4 .dep4 .dep4-link {
  padding: 0.5em 0;
}
.nav-gnb.pc .gnb-dep1 .dep1 > .gnb-dep2 {
  display: none;
  position: absolute;
  top: var(--mg-sec-080);
  left: -10px;
  right: -10px;
  background: #fff;
  padding: 1rem 0;
  text-align: center;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid var(--oc-gray-3);
}
.nav-gnb.pc .gnb-dep1 .dep1:hover > .gnb-dep2,
.nav-gnb.pc .gnb-dep1 .dep1.current > .gnb-dep2 {
  display: block;
}
.nav-gnb.pc .gnb-dep1 .dep1 > .gnb-dep2 .dep2 .dep2-link {
  display: inline-block;
  width: 100%;
  font-size: 1em;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--oc-gray-7);
}
.nav-gnb.pc .gnb-dep1 .dep1 > .gnb-dep2 .dep2 .dep2-link:hover {
  color: var(--color-navy);
}
.nav-gnb.all {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 1001;
}
.nav-gnb.all .box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - var(--gutter-lg) - var(--gutter-lg));
  max-width: 1280px;
  transform: translate(-50%, -50%);
  background: var(--oc-blue-0);
}
.nav-gnb.all .head {
  position: relative;
  height: var(--mg-sec-050);
  background: #fff;
  text-align: center;
  border-bottom: 1px solid var(--oc-gray-3);
}
.nav-gnb.all .head .logo {
  display: flex;
  align-items: center;
  height: var(--mg-sec-050);
}
.nav-gnb.all .head .logo img {
  max-height: 31px;
}
.nav-gnb.all .head .btn-close {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}
.nav-gnb.all .body {
  padding-top: var(--mg-sec-030);
  padding-bottom: var(--mg-sec-030);
}
.nav-gnb.all .gnb-dep1 {
  /*display: flex; flex-wrap:wrap; gap:var(--gutter-lg); justify-content: space-between;*/
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gutter-lg);
}
.nav-gnb.all .gnb-dep1 .dep1:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.nav-gnb.all .gnb-dep1 .dep1:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.nav-gnb.all .gnb-dep1 .dep1:nth-child(3) {
  grid-column: 4 / 8;
  grid-row: 1 / 3;
}
.nav-gnb.all .gnb-dep1 .dep1:nth-child(4) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.nav-gnb.all .gnb-dep1 .dep1:nth-child(5) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.nav-gnb.all .gnb-dep1 .dep1:nth-child(6) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.nav-gnb.all .gnb-dep1 .dep1:nth-child(7) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.nav-gnb.all .gnb-dep1 .dep1 .dep1-link {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 5px;
  word-break: keep-all;
}
.nav-gnb.all .gnb-dep1 .dep1 > .gnb-dep2 .dep2 .dep2-link {
  font-size: 1em;
}
.nav-gnb.all .menu-tree .gnb-dep2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(
    --gutter-sm
  ); /*display:flex; flex-wrap:wrap; gap:var(--gutter-sm); flex-direction:column;*/
}
.nav-gnb.all .menu-tree .gnb-dep3 {
  /*display:flex; flex-wrap:wrap; gap:var(--gutter-sm); flex-direction:column;*/
}
.nav-gnb.all .menu-tree .dep2:last-child .gnb-dep3 {
  display: block;
}
.nav-gnb.all .menu-tree .gnb-dep2 .dep2 .dep2-link {
  font-family: var(--font-title);
  font-size: 1.125em;
  font-weight: 600;
  color: var(--color-navy);
  word-break: keep-all;
}
.nav-gnb.all .menu-tree .gnb-dep3 .dep3 .dep3-link {
  font-family: var(--font-title);
  font-size: 1em;
  word-break: keep-all;
}
.nav-gnb.all .menu-tree .gnb-dep4 {
  display: none;
}
.nav-gnb.all .menu-tree .gnb-dep4 .dep4 .dep4-link {
  font-size: 1em;
  color: var(--oc-gray-7);
  word-break: keep-all;
}
.nav-gnb.all .menu-tree .gnb-dep5 .dep5 .dep5-link {
  font-size: 0.9em;
  color: var(--oc-gray-7);
  font-weight: 300;
  word-break: keep-all;
}
.nav-gnb.all .menu-tree .gnb-dep5 .dep5 .dep5-link:before {
  content: "- ";
}
.menu-gnb {
  margin-left: auto;
  display: flex;
  gap: var(--gutter-sm);
}
.menu-gnb > li {
  display: flex;
  align-items: center;
  height: var(--mg-sec-080);
  position: relative;
}
.menu-gnb > li .btn-menu {
  display: flex;
  align-items: center;
  height: var(--mg-sec-080);
  padding: 0 4px;
  position: relative;
}
.menu-gnb > li .btn-menu i {
  font-size: 24px;
}
.menu-gnb > li .btn-menu .badge {
  position: absolute;
  top: calc(50% - 16px);
  right: 0;
  display: inline-block;
  border-radius: 100px;
  padding: 4px;
  background-color: var(--oc-red-6);
}
.menu-gnb .list_news {
  min-width: 295px;
}
.menu-gnb .list_news li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  white-space: normal;
}
.menu-gnb .list_news li a .img {
  min-width: 72px;
}
.menu-gnb .list_news li a .txt {
  font-size: 0.9em;
}
.menu-gnb .list_news li a .txt .tit {
  width: 12em;
  font-size: 0.9em;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  font-family: var(--font-title);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: -0.01em;
}
.menu-gnb .list_news li a .txt time {
  font-size: 0.9em;
  color: var(--oc-gray-7);
}
.menu-gnb .list_news li a:focus,
.menu-gnb .list_news li a:hover {
  color: #000;
  background-color: var(--oc-gray-0);
}
@media all and (max-width: 1600px) {
  .nav-gnb.pc .menu-tree {
    min-height: 32em;
  }
}
@media all and (max-width: 1400px) {
  #header > .inner {
    gap: var(--gutter-sm);
  }
  .nav-gnb.pc .gnb-dep1 .dep1 .dep1-link {
    padding: 0 1em;
    font-size: 1em;
  }
  .nav-gnb.pc .gnb-dep1 .dep1 > .gnb-dep2 .dep2 .dep2-link {
    font-size: 0.9em;
  }
  .menu-gnb {
    gap: 1em;
  }
  .menu-gnb > li .btn-menu svg {
    width: 20px;
    height: 20px;
  }
  .menu-gnb > li .btn-menu i {
    font-size: 20px;
  }
}
@media all and (max-width: 1200px) {
  .nav-gnb.pc .menu-tree {
    min-height: 28em;
  }
  .nav-gnb.pc .menu-tree .menu-tree-sub .gnb-dep3 {
    flex: 1 1 100%;
  }
  .nav-gnb.pc .menu-tree .menu-tree-sub .menu-tree-img {
    display: none;
  }
  .nav-gnb.all .menu-tree .gnb-dep2 {
    gap: var(--gutter-sm);
  }
  .nav-gnb.all .box {
    width: calc(100% - var(--gutter-sm) - var(--gutter-sm));
  }
  .menu-gnb > li .btn-menu svg {
    width: 18px;
    height: 18px;
  }
  .menu-gnb > li .btn-menu i {
    font-size: 18px;
  }
}
@media all and (max-width: 1000px) {
  #header,
  #header #logo,
  #header #logo a,
  .menu-gnb > li,
  .menu-gnb > li .btn-menu {
    height: var(--mg-sec-050);
  }
  #header #logo a img {
    height: 36px;
  }
  .nav-gnb.pc {
    display: none;
  }
  .nav-gnb.all .box {
    left: auto;
    right: 0;
    top: 0;
    width: 90%;
    max-width: 250px;
    height: 100%;
    transform: translate(0, 0);
  }
  .nav-gnb.all .head {
    background: transparent;
    border: none;
  }
  .nav-gnb.all .head .logo {
    display: none;
  }
  .nav-gnb.all .body {
    padding-top: 0;
    height: calc(100% - var(--mg-sec-050));
    overflow-y: auto;
  }
  .nav-gnb.all .gnb-dep1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
  }
  .nav-gnb.all .menu-tree .gnb-dep2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 4px;
    gap: 2px;
  }
  .nav-gnb.all .menu-tree .gnb-dep3,
  .nav-gnb.all .menu-tree .gnb-dep4,
  .nav-gnb.all .menu-tree .dep2:last-child .gnb-dep3,
  .nav-gnb.all .gnb-dep1 .dep1 > .gnb-dep2 {
    display: none;
  }
  .nav-gnb.all .gnb-dep1 .dep1 .dep1-link {
    font-size: 20px;
    margin-bottom: 3px;
  }
  .nav-gnb.all .menu-tree .gnb-dep2 .dep2 .dep2-link {
    font-size: 16px;
  }
  .nav-gnb.all .menu-tree .gnb-dep2 .dep2 .dep2-link:before {
    content: "· ";
  }
  .nav-gnb.all .menu-tree .gnb-dep3 .dep3,
  .nav-gnb.all .gnb-dep1 .dep1 > .gnb-dep2 .dep2 {
    padding-left: 0.75em;
  }
  .nav-gnb.all .menu-tree .gnb-dep3 .dep3 .dep3-link,
  .nav-gnb.all .gnb-dep1 .dep1 > .gnb-dep2 .dep2 .dep2-link {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 15px;
    color: var(--oc-gray-7);
  }
}
@media all and (max-width: 768px) {
  .menu-gnb {
    gap: 8px;
  }
  .menu-gnb > li.ta {
    display: none;
  }
}

#contents {
  width: 100%;
  padding-top: var(--mg-sec-080);
}
.section {
  padding: var(--mg-sec-100) 0;
  position: relative;
}
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.section dt,
.section th {
  font-family: var(--font-title);
  word-break: keep-all;
  position: relative;
}
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 {
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.section hgroup {
  padding-bottom: var(--mg-sec-050);
  position: relative;
}
.section hgroup .title_eng {
  font-size: 1.25em;
  color: var(--oc-gray-7);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 2rem;
  position: relative;
}
.section hgroup .title_eng::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 0;
  display: block;
  width: 24px;
  height: 2px;
  background: var(--oc-gray-7);
}
.section hgroup .title {
  font-size: 3em;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.section .desc {
  font-size: 1.1em;
}
.section hgroup + .desc {
  margin-bottom: var(--mg-sec-050);
}
.section hgroup .btn_box {
  position: absolute;
  bottom: var(--mg-sec-050);
  right: 0;
}
.section h4.tit {
  font-size: 1.75em;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.section h5.tit {
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.section .title strong,
.section .tit strong {
  font-weight: 800;
}
.section .title em,
.section .tit em {
  color: var(--color-blue);
}
.section p,
.section ul li,
.section dl dt,
.section dl dd {
  word-break: keep-all;
}
.section .figure {
  border: 1px solid var(--oc-gray-3);
  padding: 1em;
  text-align: center;
}
@media all and (max-width: 1400px) {
  .section hgroup .title_eng {
    font-size: 1.125em;
  }
  .section hgroup .title {
    font-size: 2.25em;
  }
  .section .tit {
    font-size: 1.5em;
  }
  .section.sub h5 {
    font-size: 1.25em;
  }
}
@media all and (max-width: 1000px) {
  #contents {
    padding-top: var(--mg-sec-050);
  }
  .section {
    padding: var(--mg-sec-050) 0;
  }
  .section hgroup {
    padding-bottom: var(--mg-sec-030);
  }
  .section hgroup .title {
    font-size: 2em;
  }
  .section hgroup + .desc {
    margin-bottom: var(--mg-sec-030);
  }
}
@media all and (max-width: 540px) {
  .section.sub h5 {
    font-size: 16px;
  }
}

.section.main.visual {
  padding: 0;
}
.section.main.visual .swiper-slide {
  background: no-repeat 50% 50% / cover;
}
.section.main.visual .swiper-slide .inner {
  text-align: center;
  padding-top: var(--mg-sec-100);
  padding-bottom: calc(var(--mg-sec-100) + 40px);
}
.section.main.visual .title {
  font-size: 5em;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: var(--mg-sec-050);
}
.section.main.visual .txt {
  font-size: 1.25em;
  letter-spacing: -0.01em;
}
.section.main.visual2 .title,
.section.main.visual3 .title {
  font-size: 3em;
}
.section.main.visual2 .swiper-slide .inner {
  text-align: left;
  padding-top: 150px;
  padding-bottom: calc(150px + 40px);
}
.section.main.visual3 {
  background: no-repeat 50% 70% / cover;
}
.section.main.visual3 .inner {
  padding-top: 150px;
  padding-bottom: calc(150px + 40px);
  text-align: right;
}
.section.main.case > .inner {
  display: flex;
  gap: var(--mg-sec-030) var(--gutter-sm);
}
.section.main.case .text-box {
  width: calc((100% - 20px) / 3);
}
.section.main.case .text-box .sticky-box {
  position: sticky;
  top: var(--mg-sec-100);
}
.section.main.case .list-box.pc {
  flex: 1;
}
.section.main.case .list-box.mo {
  display: none;
  padding-bottom: var(--mg-sec-050);
}
.section.main.case .list_case {
  align-items: flex-start;
}
.section.main.case .list_case.col2 > li:nth-of-type(2n) {
  margin-top: 12rem;
  margin-bottom: -12rem;
}
.section.main.case .list_case.col3 > li:nth-of-type(3n-1) {
  margin-top: 4rem;
  margin-bottom: -4rem;
}
.section.main.case .list_case.col3 > li:nth-of-type(3n) {
  margin-top: 8rem;
  margin-bottom: -8rem;
}
.section.main.case .list_case > li:last-of-type {
  margin-bottom: 0 !important;
}
.section.main.case .round-box {
  aspect-ratio: 35/45;
  display: flex;
  flex-direction: column;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  color: #fff;
}
.section.main.case .round-box .tit,
.section.main.case .round-box .txt {
  opacity: 0;
}
.section.main.case .round-box::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.7)),
    color-stop(50%),
    to(rgba(0, 0, 0, 0))
  );
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    50%,
    rgba(0, 0, 0, 0)
  );
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.section.main.case .round-box:hover::before,
.section.main.case .round-box:focus::before {
  opacity: 1;
}
.section.main.case .round-box:hover .tit,
.section.main.case .round-box:hover .txt,
.section.main.case .round-box:focus .tit,
.section.main.case .round-box:focus .txt {
  opacity: 1;
}
.section.main.case .round-box .tit {
  margin-top: auto;
}
.section.main.case .round-box .icon {
  margin-top: 1rem;
}
.section.main.biz .round-box {
  aspect-ratio: 5/3;
  background: var(--oc-gray-0) no-repeat 80% 90% / auto 90%;
  margin-bottom: 1rem;
}
.section.main.biz .round-box .tit {
  font-size: 2.25em;
}
.section.main.biz .list_keyword {
  justify-content: center;
}
.section.main.biz .list_keyword .key {
  gap: 0;
  padding-right: 0;
  height: 3rem;
  font-size: 24px;
}
.section.main.biz .list_keyword .key svg {
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}
.section.main.biz .list_keyword .key:hover {
  background-color: var(--color-blue);
  color: #fff;
  gap: 0.5em;
  padding-right: 1em;
}
.section.main.biz .list_keyword .key:hover svg {
  opacity: 1;
}
.section.main.biz2,
.section.main.biz3 {
  padding-top: 0;
  padding-bottom: 0;
  height: calc(80dvh - 80px);
}
.section.main.biz2 .flex-wrap,
.section.main.biz3 .flex-wrap {
  height: 100%;
  gap: 0;
  flex-wrap: nowrap;
}
.section.main.biz2 .flex-box,
.section.main.biz3 .flex-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--mg-sec-080) 0;
  transition: var(--transition-fast);
  -webkit-transition: var(--transition-fast);
}
.section.main.biz2 .flex-box:nth-child(2),
.section.main.biz3 .flex-box:nth-child(2) {
  order: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.section.main.biz2 .flex-box:nth-child(1),
.section.main.biz3 .flex-box:nth-child(1) {
  order: 2;
}
.section.main.biz2 .flex-box:nth-child(3),
.section.main.biz3 .flex-box:nth-child(3) {
  order: 3;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.section.main.biz2 hgroup .title,
.section.main.biz3 hgroup .title {
  font-size: 3.5em;
}
.section.main.biz2 hgroup .title_eng::after,
.section.main.biz3 hgroup .title_eng::after {
  left: 50%;
  transform: translateX(-50%);
}
.section.main.biz2 .tit,
.section.main.biz3 .tit {
  font-size: 3em;
  margin-bottom: var(--gutter-sm);
}
.section.main.biz2 .list_keyword,
.section.main.biz3 .list_keyword {
  justify-content: center;
}
.section.main.biz2 .list_keyword .key,
.section.main.biz3 .list_keyword .key {
  gap: 0;
}
.section.main.biz2 .flex-box.body,
.section.main.biz3 .flex-box.body,
.section.main.biz2 .flex-box.body .tit,
.section.main.biz3 .flex-box.body .tit,
.section.main.biz2 .flex-box.body .tit em,
.section.main.biz3 .flex-box.body .tit em,
.section.main.biz2 .flex-box.body .list_keyword .key,
.section.main.biz3 .flex-box.body .list_keyword .key {
  color: #fff;
  transition: var(--transition-fast);
  -webkit-transition: var(--transition-fast);
}
.section.main.biz2 .flex-box.body .list_keyword .key,
.section.main.biz3 .flex-box.body .list_keyword .key {
  border-color: #fff;
}
.section.main.biz2 .flex-box.body .tit strong,
.section.main.biz2 .flex-box.body .tit strong + br,
.section.main.biz3 .flex-box.body .tit strong,
.section.main.biz3 .flex-box.body .tit strong + br {
  display: none;
}
.section.main.biz2 .flex-box.body .tit img,
.section.main.biz3 .flex-box.body .tit img {
  max-width: 10rem;
}
.section.main.biz2 .flex-box.head {
  background-color: var(--oc-blue-0);
}
.section.main.biz2 .flex-box:nth-child(2) {
  background: url("../img/front/bg_biz_02.png") no-repeat bottom center / cover;
}
.section.main.biz2 .flex-box:nth-child(3) {
  background: url("../img/front/bg_biz_01.png") no-repeat bottom center / cover;
}
.section.main.biz2 .flex-box.body {
  position: relative;
}
.section.main.biz2 .flex-box.body::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}
.section.main.biz2 .flex-box.body .inner {
  z-index: 2;
}
.section.main.biz2 .flex-box.body:hover .inner {
  display: none;
}
.section.main.biz2 .vod-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.section.main.biz2 .vod-box video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: left center;
}
.section.main.biz3 hgroup .title,
.section.main.biz3 hgroup .title_eng {
  color: #fff;
}
.section.main.biz3 hgroup .title_eng span {
  display: none;
}
.section.main.biz3 hgroup .title_eng img,
.section.main.biz2 .flex-box.body .tit img,
.section.main.biz3 .flex-box.body .tit img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.section.main.biz3 hgroup .title_eng::after {
  background-color: #fff;
}
.section.main.biz3 .flex-box.body:hover {
  flex: 1.25;
  background-color: rgba(0, 0, 0, 0.5);
}
/* .section.main.biz3 .flex-box.body:hover,
.section.main.biz3 .flex-box.body:hover .tit,
.section.main.biz3 .flex-box.body:hover .tit em, */
.section.main.biz3 .flex-box.body:hover .list_keyword .key {
  color: var(--oc-blue-4);
}
.section.main.biz3 .flex-box.body:hover .list_keyword .key {
  border-color: var(--oc-blue-4);
}
.section.main.biz3 .biz_bg {
  overflow: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--oc-gray-9);
}
.section.main.biz3 .biz_bg img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
}
.section.main.company {
  background-color: var(--oc-gray-0);
}
.section.main.company .img-box {
  position: relative;
}
.section.main.company .img-box .img.bg {
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50% / cover;
}
.section.main.company .img-box .img.circle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  background: #fff no-repeat 50% 45% / 50% auto;
}
@media all and (max-width: 1400px) {
  .section.main.visual .title {
    font-size: 4em;
  }
  .section.main.visual2 .title,
  .section.main.visual3 .title {
    font-size: 2.5em;
  }
  .section.main.visual .txt {
    font-size: 1.125em;
  }
  .section.main.biz .round-box .tit {
    font-size: 2em;
  }
  .section.main.biz .list_keyword .key {
    height: 2.5rem;
    font-size: 20px;
  }
  .section.main.biz .list_keyword .key svg {
    width: 20px;
    height: 20px;
  }
  .section.main.biz2 hgroup .title,
  .section.main.biz3 hgroup .title {
    font-size: 2.75em;
  }
  .section.main.biz2 .tit,
  .section.main.biz3 .tit {
    font-size: 2.5em;
  }
}
@media all and (max-width: 1200px) {
  .section.main.biz .list_keyword .key {
    font-size: 18px;
  }
  .section.main.biz .list_keyword .key svg {
    width: 18px;
    height: 18px;
  }
}
@media all and (max-width: 1000px) {
  .section.main.case {
    overflow-x: hidden;
    padding-bottom: 0;
  }
  .section.main.case > .inner {
    flex-direction: column;
  }
  .section.main.case .text-box {
    width: 100%;
  }
  .section.main.case .list-box.pc .list_case {
    display: none;
  }
  .section.main.case .list-box.mo {
    display: block;
  }
  .section.main.case .list_case.flex-wrap {
    flex-direction: column;
  }
  .section.main.case .list_case.flex-wrap .flex-box {
    width: 100%;
  }
  .section.main.case .list_case > li:nth-of-type(2n) {
    margin-top: 0;
    margin-bottom: 0;
  }
  .section.main.case .list_case > li:last-of-type {
    margin-bottom: 0;
  }
  .section.main.case .swiper-slide.inner {
    padding: 0 10px;
  }
  .section.main.case .round-box::before,
  .section.main.case .round-box .tit,
  .section.main.case .round-box .txt {
    opacity: 1;
  }
  .section.main.biz2,
  .section.main.biz3 {
    height: auto;
  }
  .section.main.biz2 .flex-wrap,
  .section.main.biz3 .flex-wrap {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .section.main.biz2 .flex-box,
  .section.main.biz3 .flex-box {
    flex: auto;
    text-align: left;
    padding: var(--mg-sec-080) 0;
  }
  .section.main.biz2 .flex-box:nth-child(1),
  .section.main.biz3 .flex-box:nth-child(1) {
    order: 1;
    width: 100%;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  .section.main.biz2 .flex-box:nth-child(2),
  .section.main.biz3 .flex-box:nth-child(2) {
    order: 2;
    width: 50%;
    border: none;
  }
  .section.main.biz2 .flex-box:nth-child(3),
  .section.main.biz3 .flex-box:nth-child(3) {
    order: 3;
    width: 50%;
  }
  .section.main.biz2 .flex-box.body,
  .section.main.biz3 .flex-box.body {
    flex: none;
    display: block;
  }
  .section.main.biz2 hgroup .title_eng::after,
  .section.main.biz3 hgroup .title_eng::after {
    left: 0;
    transform: none;
  }
  .section.main.biz3 hgroup .title_eng span {
    display: inline;
  }
  .section.main.biz3 hgroup .title_eng img {
    -webkit-filter: none;
    filter: none;
    height: 36px;
  }
  .section.main.biz2 hgroup .title,
  .section.main.biz3 hgroup .title {
    font-size: 2em;
  }
  .section.main.biz2 .tit,
  .section.main.biz3 .tit {
    font-size: 1.75em;
  }
  .section.main.biz2 .list_keyword,
  .section.main.biz3 .list_keyword {
    justify-content: flex-start;
    flex-direction: column;
  }
  .section.main.biz2 .flex-box.body .list_keyword .key,
  .section.main.biz3 .flex-box.body .list_keyword .key {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--oc-gray-9);
    font-weight: 500;
  }
  .section.main.biz2 .flex-box.body:hover .list_keyword .key,
  .section.main.biz3 .flex-box.body:hover .list_keyword .key {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--oc-gray-9);
    font-weight: 500;
  }
  .section.main.biz2 .flex-box.head {
    background-color: #fff;
  }
  .section.main.biz2 .flex-box.body:hover .inner {
    display: block;
  }
  .section.main.biz2 .vod-box {
    display: none;
  }
  .section.main.biz3 .flex-box:nth-child(2) {
    background: url("../img/front/bg_biz_02.jpg") no-repeat bottom center /
      cover;
  }
  .section.main.biz3 .flex-box:nth-child(3) {
    background: url("../img/front/bg_biz_03.jpg") no-repeat bottom center /
      cover;
  }
  .section.main.biz2 .flex-box.body .tit img,
  .section.main.biz3 .flex-box.body .tit img {
    margin-bottom: 0.25em;
  }
  .section.main.biz3 .flex-box.body:hover {
    flex: none;
    background-color: var(--color-navy);
  }
  .section.main.biz3 .flex-box.body:hover,
  .section.main.biz3 .flex-box.body:hover .tit,
  .section.main.biz3 .flex-box.body:hover .tit em {
    color: #fff;
  }
  .section.main.biz3 hgroup .title {
    color: var(--oc-gray-9);
  }
  .section.main.biz3 hgroup .title_eng {
    color: var(--oc-gray-7);
  }
  .section.main.biz3 hgroup .title_eng::after {
    background-color: var(--oc-gray-7);
  }
  .section.main.biz3 .biz_bg {
    display: none;
  }
  .section.main.company .img-box .img.circle {
    width: 80px;
    height: 80px;
  }
}
@media all and (max-width: 768px) {
  .section.main.visual .swiper-slide .inner {
    padding-top: var(--mg-sec-050);
    padding-bottom: calc(var(--mg-sec-050) + 30px);
  }
  .section.main.visual .title {
    font-size: 3em;
    margin-bottom: var(--mg-sec-030);
  }
  .section.main.visual2 .swiper-slide .inner,
  .section.main.visual3 .inner {
    padding-top: var(--mg-sec-100);
    padding-bottom: calc(var(--mg-sec-100) + 30px);
  }
  .section.main.visual2 .title,
  .section.main.visual3 .title {
    font-size: 2em;
  }
  .section.main.biz .round-box .tit {
    font-size: 1.5em;
  }
  .section.main.biz .list_keyword .key {
    height: 2rem;
    font-size: 16px;
  }
  .section.main.biz .list_keyword .key svg {
    width: 16px;
    height: 16px;
  }
  .section.main.biz2 .flex-box,
  .section.main.biz3 .flex-box {
    padding: var(--mg-sec-050) 0;
  }
  .section.main.company .img-box .img.bg {
    aspect-ratio: 7/4;
  }
  .section.main.company .img-box .img.circle {
    top: 0;
    left: 50%;
    transform: translate(-50%, -25%);
  }
}
@media all and (max-width: 540px) {
  .section.main.biz2 .flex-box:nth-child(2),
  .section.main.biz3 .flex-box:nth-child(2),
  .section.main.biz2 .flex-box:nth-child(3),
  .section.main.biz3 .flex-box:nth-child(3) {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
}

.section.subhead {
  padding: 0;
}
.section.subhead hgroup .title {
  font-size: 3.5em;
}
.section.subhead.mode-dark::before {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.6)),
    color-stop(50%),
    to(rgba(0, 0, 0, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6),
    50%,
    rgba(0, 0, 0, 0.2)
  );
}
.section.subhead.mode-dark .inner {
  position: relative;
  z-index: 2;
}
.section.subhead.mode-dark hgroup {
  padding: calc(5em - 30px) 0 6em;
}
.section.sub .title_art {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 0.5em;
}
.section.sub .title_art:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.2em;
  height: 0.2em;
  background: var(--color-blue);
}
.section.sub .flex-box.round-box a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
.section.sub .flex-box.round-box-sub a {
  display: contents;
}
.section.sub .flex-box.round-box a:hover {
  color: var(--color-blue);
  background-color: var(--oc-blue-0);
}
.section.sub .flex-box.round-box h5 {
  line-height: 1.4;
}
.section.sub .flex-box.round-box .text {
  padding: var(--mg-sec-030);
}
.section.sub .flex-box.round-box a .text {
  flex: 1;
  padding-right: 60px;
  position: relative;
}
.section.sub .flex-box.round-box .text .tit {
  margin-bottom: 0;
}
.section.sub .flex-box.round-box .text .icon {
  position: absolute;
  bottom: var(--mg-sec-030);
  right: var(--mg-sec-030);
}
.section.sub .flex-box.round-box .text + .img {
  border-top: 1px solid var(--oc-gray-0) !important;
}
.section.sub .flex-box.round-box .img img {
  width: 100%;
}
.section.sub .flex-box.round-box .img.bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.section.sub .flex-box.round-box .text.center,
.section.sub .flex-box.round-box .img.center {
  padding: var(--mg-sec-030);
  text-align: center;
}
.section.sub .flex-box.round-box .img.center + .text,
.section.sub .flex-box.round-box .text + .img.center {
  padding-top: 0;
}
.section.sub .flex-box.round-box .img.center img {
  width: auto;
}
.section.sub .flex-box.round-box.rows > a,
.section.sub .flex-box.round-box.rows > div {
  gap: 0;
  flex-direction: row;
}
.section.sub .flex-box.round-box.rows .text {
  order: 2;
}
.section.sub .flex-box.round-box.rows .img {
  order: 1;
}
.section.sub .flex-box.round-box .list_ul li {
  font-size: 1.1em;
}
.section.sub .flex-box.round-box.rows .rows {
  display: flex;
  align-items: center;
  height: 100%;
}
.section.sub .flex-box.round-box.rows .rows .img,
.section.sub .flex-box.round-box.rows .rows .text {
  padding: var(--mg-sec-030);
}
.section.sub .flex-box.round-box.rows .rows .img.bg {
  height: 100%;
  width: 50%;
}
.section.sub .flex-box.round-box.rows .rows .text {
  flex: 1;
}
.section.sub .flex-box.round-box.video a .img {
  position: relative;
}
.section.sub .flex-box.round-box.video a .img.bg {
  aspect-ratio: 16/9;
}
.section.sub .flex-box.round-box.video a .img.bg::before {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.5)),
    color-stop(50%),
    to(rgba(0, 0, 0, 0))
  );
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    50%,
    rgba(0, 0, 0, 0)
  );
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.section.sub .flex-box.round-box.video .img .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0.8;
  z-index: 2;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.section.sub .flex-box.round-box.video .img .icon svg {
  width: 36px;
  height: 36px;
}
.section.sub .flex-box.round-box.video a:hover .img.bg::before,
.section.sub .flex-box.round-box.video a:hover .img .icon {
  opacity: 1;
}
@media all and (max-width: 1400px) {
  .section.subhead hgroup .title {
    font-size: 3em;
  }
}
@media all and (max-width: 1200px) {
  .section.sub .flex-box.round-box .text,
  .section.sub .flex-box.round-box .text.center,
  .section.sub .flex-box.round-box .img.center,
  .section.sub .flex-box.round-box.rows .rows .img,
  .section.sub .flex-box.round-box.rows .rows .text {
    padding: var(--gutter-sm);
  }
  .section.sub .flex-box.round-box a .text {
    padding-right: 50px;
  }
  .section.sub .flex-box.round-box .text .icon {
    bottom: var(--gutter-sm);
    right: var(--gutter-sm);
  }
}
@media all and (max-width: 1000px) {
  .section.subhead.mode-dark hgroup {
    padding: calc(5em - 40px) 0 5em;
  }
  .section.subhead hgroup .title {
    font-size: 2.5em;
  }
  .section.sub .flex-box.round-box.rows .rows {
    display: block;
  }
  .section.sub .flex-box.round-box.rows .rows .img,
  .section.sub .flex-box.round-box.rows .rows .text {
    width: 100%;
  }
  .section.sub .flex-box.round-box.rows .rows .img.bg {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
  }
}
@media all and (max-width: 768px) {
  .section.sub .flex-box.round-box.rows .rows {
    display: flex;
    align-items: center;
  }
  .section.sub .flex-box.round-box.rows .rows .img.bg {
    height: 100%;
    width: 50%;
  }
  .section.sub .flex-box.round-box.rows .rows .text {
    flex: 1;
  }
}
@media all and (max-width: 540px) {
  .section.sub .flex-box.round-box.rows .rows {
    display: block;
  }
  .section.sub .flex-box.round-box.rows .rows .img,
  .section.sub .flex-box.round-box.rows .rows .text {
    width: 100%;
  }
  .section.sub .flex-box.round-box.rows .rows .img.bg {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
  }
}

.section.subhead.service {
  text-align: center;
}
.section.subhead.service .form_custom.search {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.section.subhead.service .input {
  border-color: #fff;
  background: #fff;
}
.section.subhead.service .flex-wrap.col5 {
  justify-content: center;
}
.section.sub.location {
  background-color: var(--oc-gray-0);
}
.section.sub.location .map-box {
  flex: 1;
  background: #fff;
  min-height: 30em;
}
.section.sub.history {
  background-color: var(--oc-gray-0);
  overflow-x: hidden;
}
.section.sub.history .tit {
  font-size: 3em;
  margin-bottom: var(--mg-sec-050);
}
.section.sub.history .list-history {
  font-size: 1.1em;
}
.section.sub.history .list-history dl {
  display: flex;
  gap: 0.5em;
  align-items: flex-start;
}
.section.sub.history .list-history dt {
  /*width:2em;*/
  color: var(--oc-gray-7);
  font-family: var(--font-text);
  font-weight: 700;
}
.section.sub.history .swiper {
  overflow: visible;
}
.section.sub.history .btn-box {
  top: -100px;
  right: calc(var(--gutter-lg) + 0.75em);
  bottom: auto;
  gap: 0.5em;
}
.section.sub.history .btn-box .swiper-button-next,
.section.sub.history .btn-box .swiper-button-prev {
  width: 3em;
  height: 3em;
  border: 1px solid var(--oc-gray-7);
  border-radius: 50%;
}
.section.sub.history .btn-box .swiper-button-next:hover,
.section.sub.history .btn-box .swiper-button-prev:hover {
  border-color: var(--color-blue);
}
.section.sub.history .swiper-pagination {
  top: var(--mg-sec-080);
}
.section.sub.history .swiper-pagination-progressbar {
  background-color: var(--oc-gray-3);
}
.section.sub.history
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background-color: var(--color-blue);
}
.section.sub.solution.list .flex-box.round-box a {
  background-color: var(--color-navy);
  color: #fff;
}
.section.sub.solution.list .flex-box.round-box a .img.bg {
  width: 100%;
  aspect-ratio: 17/19;
  filter: grayscale(100%);
}
.section.sub.solution.list .flex-box.round-box a:hover {
  background-color: var(--color-blue);
}
.section.sub.solution.list .flex-box.round-box a:hover .img.bg {
  filter: none;
}
.section.sub.sustain1 ol > li {
  margin-top: 0.5rem;
}
.section.sub.sustain1 + .inner .img.full {
  width: 100%;
  aspect-ratio: 4/1;
}
.section.sub.sustain1 .inner > .btn_custom {
  margin-bottom: var(--mg-sec-050);
}
.section.sub.brand .title,
.section.sub.brand .tit {
  font-family: var(--font-brand);
  letter-spacing: 0;
}
.section.sub.brand .title em,
.section.sub.brand .tit em {
  color: var(--color-navy);
}
.section.sub.brand.cloud {
  background-color: var(--oc-gray-0);
}
.section.sub.brand.cloud > .inner {
  display: flex;
  align-items: center;
  gap: var(--mg-sec-030) var(--gutter-sm);
}
.section.sub.brand.cloud .text-box {
  width: calc((100% - 20px) / 3);
}
.section.sub.brand.cloud .img-box {
  flex: 1;
}
.section.sub.brand.service .img {
  text-align: center;
}
.section.sub.brand.pc_mo {
  overflow-x: hidden;
}
.section.sub.brand.pc_mo .swiper {
  overflow: visible;
  padding-bottom: var(--mg-sec-050);
}
.section.sub.brand.pc_mo .swiper .swiper-slide .tit {
  margin: 1rem 0 0.5rem;
}
.section.sub.brand.pc_mo .swiper .swiper-slide .img {
  display: flex;
  justify-content: center;
  aspect-ratio: 3/2;
  background-color: var(--oc-gray-0);
}
.section.sub.brand.pc_mo .swiper .swiper-slide .img img {
  height: 100%;
  object-fit: contain;
}
.section.sub.brand.pc_mo .swiper .swiper-slide .img.col2 img {
  width: 50%;
  height: auto;
}
.section.sub.brand.smart .round-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background: #fff;
  text-align: center;
}
.section.sub.brand.smart .round-box .img img {
  max-height: 396px;
}
.section.sub.notice .tit svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}
.section.sub.notice li a h5 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section.sub.notice li a time {
  font-size: 0.9em;
  color: var(--oc-gray-7);
}
.section.sub.guide {
  background-color: var(--oc-gray-0);
}
.section.sub.download,
.section.sub.faq {
  background-color: var(--oc-blue-0);
}
.section.sub.download .btn_custom.bd {
  background-color: #fff;
  text-align: left;
}
.section.sub.download .btn_custom.bd img {
  border-radius: 4px;
}
.section.sub.download .btn_custom.bd svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}
.section.sub.download .btn_custom.bd:hover {
  background-color: #fff;
}
.section.sub.download .flex-wrap.col5 {
  justify-content: center;
}
.section.sub.faq .text-box .sticky-box {
  position: sticky;
  top: var(--mg-sec-080);
  background-color: var(--oc-blue-0);
  z-index: 10;
}
@media all and (max-width: 1400px) {
  .section.sub.history .tit {
    font-size: 2.5em;
  }
  .section.sub.history .swiper-pagination {
    top: 65px;
  }
}
@media all and (max-width: 1000px) {
  .section.sub.brand.cloud .text-box {
    width: calc((100% - 20px) / 2);
  }
  .section.sub.history .btn-box {
    top: -80px;
  }
  .section.sub.history .swiper-pagination {
    top: 60px;
  }
  .section.sub.brand.smart .flex-wrap {
    flex-direction: column;
  }
  .section.sub.brand.smart .flex-wrap .flex-box {
    width: 100%;
  }
  .section.sub.faq .text-box .sticky-box {
    top: var(--mg-sec-050);
  }
}
@media all and (max-width: 768px) {
  .section.sub.location .map-box {
    width: 100%;
  }
  .section.sub.history .swiper {
    padding-bottom: 40px;
  }
  .section.sub.history .tit {
    font-size: 2.25em;
    margin-bottom: var(--mg-sec-030);
  }
  .section.sub.history .swiper-pagination {
    top: var(--mg-sec-050);
  }
  .section.sub.history .btn-box {
    top: auto;
    bottom: 0;
    right: 50%;
  }
  .section.sub.history .btn-box .swiper-button-next,
  .section.sub.history .btn-box .swiper-button-prev {
    width: 2em;
    height: 2em;
  }
  .section.sub.solution.list .section.sub.solution .case.round-box .text {
    order: 1;
  }
  .section.sub.solution .case.round-box .img {
    order: 2;
  }
  .section.sub.brand.cloud > .inner {
    flex-direction: column;
  }
  .section.sub.brand.cloud .text-box,
  .section.sub.brand.cloud .form-box {
    width: 100%;
  }
  .section.sub.brand.smart .round-box .list_ul,
  .section.sub.brand.smart .round-box p {
    text-align: left;
  }
  .section.sub.notice li a h5 {
    white-space: normal;
    overflow: visible;
  }
}
@media all and (max-width: 540px) {
  .section.sub.solution.list .flex-box.round-box a .img.bg {
    aspect-ratio: 5/4;
    filter: none;
  }
}

/* support */
.support .list_support {
  display: flex;
  margin: 0 -30px;
}
.support .list_support > li {
  flex: 1;
  padding: 0 var(--mg-sec-030);
}
.support .list_support > li + li {
  border-left: 1px solid var(--oc-gray-3);
}
.support .list_support .tit svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}
.support .list_support .tit ~ ul li + li {
  margin-top: var(--gutter-sm);
}
.support .list_support a h5 {
  margin-bottom: 0.25rem;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.support .list_support a h5 svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}
.support .list_support a:hover h5 {
  color: var(--color-blue);
}
@media all and (max-width: 1200px) {
  .support .list_support {
    display: flex;
    margin: 0 -20px;
  }
  .support .list_support > li {
    flex: 1;
    padding: 0 var(--gutter-sm);
  }
}
@media all and (max-width: 768px) {
  .support .list_support {
    flex-direction: column;
    margin: 0;
  }
  .support .list_support > li {
    padding: var(--gutter-sm) 0;
  }
  .support .list_support > li + li {
    border: none;
    border-top: 1px solid var(--oc-gray-3);
  }
  .support .list_support .tit ~ ul li + li {
    margin-top: 1rem;
  }
}

/* faq */
.list_faq {
  flex-direction: column;
  gap: var(--gutter-sm) var(--gutter-sm);
  margin: 0 auto;
}
.faq-box {
  background: #fff;
  border-radius: 1em;
  overflow: hidden;
  border: 0;
  padding: var(--gutter-sm);
  height: auto;
}
.faq-box .faq_q {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  position: relative;
}
.faq-box .faq_q:before {
  content: "Q.";
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  flex: none;
  z-index: 1;
}
.faq-box .faq_q h5 {
  margin-bottom: 0;
  padding: 0 0.5rem;
  padding-left: var(--mg-sec-030);
  line-height: 1.4;
  width: calc(100% - 28px);
}
.faq-box .faq_q .button {
  margin-left: auto;
  flex: none;
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0 none;
}
.faq-box .faq_q .button:before,
.faq-box .faq_q .button:after {
  content: "";
  position: absolute;
  background-color: var(--oc-gray-9);
  transition: transform 0.25s ease-out;
}
.faq-box .faq_q .button:before {
  /* Vertical line */
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
}
.faq-box .faq_q .button:after {
  /* horizontal line */
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
}
.faq-box .faq_a {
  margin-top: 1rem;
  position: relative;
}
.faq-box .faq_a:before {
  content: "A.";
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  flex: none;
  top: -0.05em;
}
.faq-box .faq_a p {
  padding: 0 0.5rem;
  padding-left: var(--mg-sec-030);
  font-size: 1.125em;
  margin-bottom: 0;
}
/*
.faq-box.active { background:var(--color-blue); color:#fff; }
.faq-box.active .faq_q .button:before{ transform: rotate(90deg); background-color:#fff; }
.faq-box.active .faq_q .button:after{ transform: rotate(180deg); background-color:#fff; }
*/
@media all and (max-width: 1200px) {
  .faq-box {
    padding: var(--gutter-sm);
  }
  .faq-box .faq_q h5 {
    width: calc(100% - 24px);
    padding-left: 1.5rem;
  }
  .faq-box .faq_q .button {
    width: 24px;
    height: 24px;
  }
  .faq-box .faq_q:before,
  .faq-box .faq_a:before {
    font-size: 1.125rem;
  }
  .faq-box .faq_a:before {
    top: -0.1em;
  }
  .faq-box .faq_a p {
    font-size: 1em;
    padding-left: 1.5rem;
  }
}
@media all and (max-width: 540px) {
  .faq-box .faq_q h5 {
    width: calc(100% - 22px);
  }
  .faq-box .faq_q .button {
    width: 22px;
    height: 22px;
  }
}
/* faq 부트스트랩 */
.faq-box.accordion-item {
  border-radius: 1em !important;
  border: none !important;
  cursor: pointer;
}
.accordion-button:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background: transparent !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed):before {
  transform: rotate(90deg);
  background-color: var(--color-blue);
}
.accordion-button:not(.collapsed):after {
  transform: rotate(180deg);
  background-color: var(--color-blue);
}
.accordion-button:not(.collapsed) ~ h5 {
  color: var(--color-blue);
}

/* product */
.nav-prd {
  position: sticky;
  top: var(--mg-sec-080);
  background-color: #fff;
  border-bottom: 1px solid var(--oc-gray-3);
  z-index: 100;
}
.nav-prd ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--gutter-lg);
}
.nav-prd li a.key {
  font-family: var(--font-title);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border: none;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
}
.nav-prd li a.key:hover {
  color: var(--color-blue);
}
.nav-prd li a.key.current {
  color: var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
}
.nav-prd.box {
  border: none;
}
.nav-prd.box ul {
  gap: 0;
}
.nav-prd.box li {
  flex: 1;
}
.nav-prd.box li a.key {
  width: 100%;
  background-color: var(--oc-gray-0);
  border: 1px solid var(--oc-gray-3);
  text-transform: capitalize;
  justify-content: center;
}
.nav-prd.box li:not(:last-child) a.key {
  border-right: none;
}
.nav-prd.box li a.key.current {
  background-color: #fff;
  border-bottom: 1px solid transparent;
}
.nav-prd li a.key.scrollto,
.nav-prd.box li a.key.scrollto {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.filter-prd .form_custom dl {
  display: block;
}
.filter-prd .form_custom dt {
  font-weight: 600;
}
.filter-prd .form_custom dd {
  font-size: 14px;
}
.filter-prd .form_custom .option {
  display: block;
}
.filter-prd .form_custom .option li input[type="checkbox"],
.filter-prd .form_custom .option li input[type="radio"],
.filter-prd .form_custom .option li label {
  padding: 0;
  color: var(--oc-gray-7);
}
/* 
.filter-prd .form_custom .select { background-color:#fff; }
.filter-prd .subcate_container { display: block; }
.filter-prd .subcate_toggle_btn { display: none; }
*/
.filter-prd .subcate_container {
  display: none;
}
.filter-prd .subcate_container.open {
  display: block;
}
/* 카테고리 값 없으면 공통분류만 노출, 카테고리 값 있으면 카테고리의 분류만 노출 함으로써 필터 더보기 버튼 필요없어서 분류 상단에 보더값 주석처리 LHH 2025-11-19 */
/*
.filter-prd .subcate_container .cate_item.sub:first-child { border-top: 1px solid var(--oc-gray-3); }
*/
.filter-prd .subcate_toggle_btn {
  display: inline-flex;
}
.filter-prd .btn-box {
  margin-top: 0;
  padding: 10px;
}
.flex-wrap .flex-box.prd {
  text-align: center;
}
.flex-wrap .flex-box.prd h5 {
  margin: 0.5rem 0;
}
.flex-wrap .flex-box.prd .img.round-box {
  background-color: var(--oc-gray-0);
}
@media all and (max-width: 1000px) {
  .nav-prd {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    top: var(--mg-sec-050);
  }
  .nav-prd ul {
    gap: var(--gutter-sm);
    justify-content: flex-start;
    padding: 0 var(--gutter-sm);
    overflow-x: auto;
  }
  .nav-prd.box ul {
    padding: 0;
  }
  .nav-prd.box li {
    flex: auto;
  }
  .filter-prd {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -10px;
    width: calc(100% + 40px);
    padding: 0 10px; /*background-color:var(--oc-gray-0);*/
  }
  .filter-prd .form_custom .list_form > li {
    padding: 5px 10px;
  }
  .filter-prd .form_custom dl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-sm);
  }
  .filter-prd .form_custom dt {
    width: 7em;
  }
  .filter-prd .form_custom dt,
  .filter-prd .form_custom dd {
    font-size: 13px;
  }
  .filter-prd .form_custom .option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.5em;
  }
  .filter-prd .form_custom .option li input[type="checkbox"],
  .filter-prd .form_custom .option li input[type="radio"],
  .filter-prd .form_custom .option li label {
    padding: 0.25em 0;
  }
  .nav-prd li a.key.scrollto,
  .nav-prd.box li a.key.scrollto {
    font-size: 0.85em;
  }
}

.section.product.view.head {
  padding: 0;
}
.section.product.view.head > .inner {
  align-items: flex-end;
}
.section.product.view.head > .inner > .img-box {
  max-width: 662px;
  margin-left: auto;
  margin-right: auto;
}
.section.product.view.head .img-box .btn-box {
  bottom: auto;
  top: 50%;
  transform: translate(50%, -50%);
  justify-content: space-between;
  padding: 0 0.5em;
}
.section.product.view.head .img-box .btn-box .swiper-button-next,
.section.product.view.head .img-box .btn-box .swiper-button-prev {
  font-size: 1.5em;
}
.section.product.view.head .info-box .title {
  word-break: break-word;
}
.section.product.view.head .info-box .btn-box {
  margin-bottom: 1rem;
  text-align: left;
}
.section.product.view.head .info-box hgroup + .btn-box {
  margin-bottom: 0;
}
.section.product.view.head .info-box .desc {
  margin-bottom: 0;
}
.section.product.view.head .info-box .desc + .item-thumb {
  margin-top: var(--mg-sec-050);
}
.section.product.view.head .img.round-box {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background-color: #fff;
}
.section.product.view.head .img.round-box img {
  width: 100%;
}
.section.product.view.head .img.round-box .video-container {
  cursor: grab;
  position: relative;
  width: 100%;
  height: 100%;
}
.section.product.view.head .img.round-box .video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.section.product.view.body .article {
  padding-top: var(--mg-sec-080);
}
.section.product.view.body .article .tit {
  margin-bottom: 1.5rem;
  font-size: 2em;
  font-weight: 700;
  border-bottom: 1px solid var(--oc-gray-3);
  width: fit-content;
}
.section.product.view.body .article .tit i {
  color: var(--color-blue);
  font-size: 0.8em;
}
.section.product.view.body .article .text-box {
  background-color: var(--oc-gray-0);
  padding: var(--mg-sec-050) var(--gutter-lg);
}
.section.product.view.body .article .text-box h5 {
  margin-bottom: 0.25em;
  font-weight: 600;
}
.section.product.view.body .article .text-box .list-icon {
  margin-bottom: var(--mg-sec-050);
  justify-content: center;
  gap: var(--mg-sec-050) var(--mg-sec-080);
}
.section.product.view.body .article .text-box .list-icon dt {
  color: var(--oc-gray-7);
  font-weight: 500;
  margin-bottom: 1em;
}
.section.product.view.body .article .text-box .list-icon dd {
  justify-content: center;
  gap: 1rem;
}
.section.product.view.body .article .text-box .list-icon dd img {
  width: auto;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1/1;
}
@media all and (max-width: 1440px) {
  .section.product.view.head .img.round-box .video-container video {
    position: static;
    top: 0;
    left: 0;
    transform: translate(0);
    width: 100%;
  }
}
/*----------------------------------------- 0409 kjs 추가분 { -----------------------------------------*/
.section.product.view.body .article .text-box .list_txt > li {
  width: calc((100% - var(--mg-sec-030)) / 2);
}
@media all and (max-width: 1000px) {
  .section.product.view.body .article .text-box .list_txt > li {
    width: 100%;
  }
}
/*----------------------------------------- 0409 kjs 추가분 { -----------------------------------------*/

/*----------------------------------------- 0402 kjs 추가분 { -----------------------------------------*/
.section.product.view.body .article .text-box .list-icon.list-02 > li {
  min-width: calc((100% - 240px) / 4);
}
.section.product.view.body .article .text-box .list-icon.list-02 dd {
  flex-direction: column;
}
.section.product.view.body .article .text-box .list-icon.list-02 dd .flex-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section.product.view.body .article .text-box .list-icon.list-02 dd img {
  max-width: 45px;
}

.section.product.view.body .article .text-box .list-icon.list-03 {
  gap: var(--mg-sec-030);
}
.section.product.view.body .article .text-box .list-icon.list-03 li {
  width: 100%;
  border-bottom: 1px dashed var(--oc-gray-3);
  padding-bottom: var(--mg-sec-030);
}
.section.product.view.body .article .text-box .list-icon.list-03 dl {
  display: flex;
}
.section.product.view.body .article .text-box .list-icon.list-03 dt {
  width: 140px;
  text-align: left;
  line-height: 45px;
  margin: 0;
}
.section.product.view.body .article .text-box .list-icon.list-03 dd {
  width: calc(100% - 140px);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.section.product.view.body .article .text-box .list-icon.list-03 dd .flex-box {
  width: calc((100% - 20px) / 3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section.product.view.body .article .text-box .list-icon.list-03 dd .img-box {
  width: 45px;
  aspect-ratio: 1/1;
}
.section.product.view.body .article .text-box .list-icon.list-03 dd img {
  max-width: 45px;
}
.section.product.view.body .article .text-box .list-icon.list-03 dd strong {
  text-align: left;
}
@media all and (max-width: 1000px) {
  .section.product.view.body .article .text-box .list-icon.list-03 {
    gap: 1rem;
  }
  .section.product.view.body .article .text-box .list-icon.list-03 li {
    padding-bottom: 1rem;
  }
}
/*----------------------------------------- 0402 kjs 추가분 } -----------------------------------------*/

/*----------------------------------------- 0509 ljg 추가분 } -----------------------------------------*/

.section.product.view.body .article.info .list-icon.list-04 {
  /*display:grid; grid-template-columns: repeat(3, 1fr);*/
  justify-content: center;
}
.section.product.view.body .article.info .list-icon.list-04 .round-box {
  background: #fff;
  padding: 15px 10px 20px;
}
.section.product.view.body .article.info .list-icon.list-04 .round-box dt {
  text-align: center;
  font-weight: 500;
  font-size: 1.1em;
  color: var(--oc-gray-7);
  margin-bottom: 0.75rem;
}
.section.product.view.body .article.info .list-icon.list-04 .round-box dd {
  display: flex;
  gap: 5px;
}
.section.product.view.body
  .article.info
  .list-icon.list-04
  .round-box
  dd
  .info-icon {
  flex: 1;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}
.section.product.view.body
  .article.info
  .list-icon.list-04
  .round-box
  dd
  .info-icon
  .img-box {
  margin-bottom: 0.5rem;
}
.section.product.view.body
  .article.info
  .list-icon.list-04
  .round-box
  dd
  .info-icon
  .img-box
  img {
  max-width: 100%;
  height: auto;
}
.section.product.view.body
  .article.info
  .list-icon.list-04
  .round-box
  dd
  .info-icon
  strong {
  font-weight: 500;
}
@media all and (max-width: 1200px) {
  .section.product.view.body
    .article.info
    .list-icon.list-04
    .round-box
    dd
    .info-icon {
    font-size: 13px;
  }
}
@media all and (max-width: 1000px) {
  .section.product.view.body .article.info .list-icon.list-04 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (max-width: 768px) {
  .section.product.view.body .article.info .list-icon.list-04 .round-box {
    padding: 10px 5px 15px;
  }
}
@media all and (max-width: 540px) {
  .section.product.view.body .article.info .list-icon.list-04 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.section.product.view.body .article.spec .list_table {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--oc-gray-3);
}
.section.product.view.body .article.spec .list_table li {
  flex: 1 1 50%;
  display: flex;
  border-top: 1px solid var(--oc-gray-3);
}
.section.product.view.body .article.spec .list_table li div {
  padding: 0.5em 1em;
}
.section.product.view.body .article.spec .list_table li .tt {
  width: 12em;
  background: var(--oc-gray-0);
  font-weight: 600;
}
.section.product.view.body .article.spec .list_table li .con {
  width: calc(100% - 12em);
}
@media all and (max-width: 1200px) {
  .section.product.view.body .article.spec .list_table li .tt {
    width: 10em;
  }
  .section.product.view.body .article.spec .list_table li .con {
    width: calc(100% - 10em);
  }
}
@media all and (max-width: 768px) {
  .section.product.view.body .article.spec .list_table li {
    flex: 1 1 100%;
  }
  .section.product.view.body .article.spec .list_table li div {
    padding: 0.5em 0.75em;
  }
  .section.product.view.body .article.spec .list_table li .tt {
    width: 8em;
  }
  .section.product.view.body .article.spec .list_table li .con {
    width: calc(100% - 8em);
  }
}

/*----------------------------------------- 0509 ljg 추가분 } -----------------------------------------*/

.section.product.view.body .article .text-box .list-icon dd strong {
  font-weight: 600;
}
.section.product.view.body .article.spec tbody th {
  width: 13em;
}
.section.product.view.body .article.down .btn_custom i {
  font-size: 1.25em;
  width: 1.25em;
}
.section.product.view.body .article.down .btn_custom.down {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.section.product.view.body .article.down .btn_custom.down.bd {
  padding-top: var(--gutter-sm);
  padding-bottom: var(--gutter-sm);
  min-height: 80px;
  align-items: flex-end;
  white-space: normal;
}
.section.product.view.body .article.down .btn_custom.down .text {
  flex: 1;
  line-height: 1.4;
  width: 100%;
  text-align: left;
}
.section.product.view.body .article.down .btn_custom.down .text h6 {
  font-size: 1.1em;
}
.section.product.view.body .article.down .btn_custom.down .text p {
  font-size: 14px;
  color: var(--oc-gray-7);
  padding-top: 5px;
}
.section.product.view.body .article.down .btn_custom.down .text p span:after {
  content: " |";
  color: var(--oc-gray-3);
}
.section.product.view.body
  .article.down
  .btn_custom.down
  .text
  p
  span:last-child:after {
  content: "";
  padding-left: 0;
}
.section.product.view.body .article.down .btn_custom.down small {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--oc-gray-7);
  font-weight: 400;
  text-transform: uppercase;
}
.section.product.view.body .swiper.related {
  padding-bottom: var(--mg-sec-050);
}
.section.product.list .body {
  padding-top: var(--mg-sec-050);
  align-items: flex-start;
}
.section.product.list .body .filter-prd {
  min-width: 205px;
}
.section.product.list .body .filter-prd .list_form {
  margin-top: -10px;
}
.section.product.list .body .list-prd {
  flex: 1;
}
.section.product.list .body .list-prd .list-prd-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--mg-sec-030);
}
.section.product.list .body .list-prd .list-prd-top .list-prd-total {
  font-size: 14px;
  color: var(--oc-gray-7);
  letter-spacing: 0;
}
.section.product.list .body .list-prd .list-prd-top .list-prd-total strong {
  color: var(--oc-gray-9);
}
.section.product.list .body .list-prd .btn-box {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: var(--mg-sec-030);
}
.section.product.list .body .list-prd .list-prd-top .btn-box {
  margin: 0;
  margin-left: auto;
}
.section.product.list .body .list-prd .img {
  border: 5px solid var(--oc-gray-0);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.section.product.list .body .list-prd .img .no_image {
  color: var(--oc-gray-7);
}
.section.product.list .body .list-prd .text-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  padding: calc(var(--gutter-sm) - 5px) var(--gutter-sm) var(--gutter-sm);
}
.section.product.list .body .list-prd .text-box h5 {
  word-break: keep-all;
  font-size: 1.25em;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.section.product.list .body .list-prd .text-box small {
  font-size: 14px;
  color: var(--oc-gray-7);
  letter-spacing: 0.01em;
}
.section.product.list .body .list-prd .text-box small + small {
  font-size: 12px;
  color: var(--oc-gray-6);
  letter-spacing: 0;
}
.section.product.list .body .list-prd .list-icon {
  /* margin-top:auto;*/
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.section.product.list .body .list-prd .list-icon li {
  background: #fff;
}
.section.product.list .body .list-prd .list-icon li dl {
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
}
.section.product.list .body .list-prd .list-icon li dl dt {
  width: 54px;
  padding: 0 10px;
}
.section.product.list .body .list-prd .list-icon li dl dt img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -webkit-filter: grayscale(100%) brightness(0);
  filter: grayscale(100%) brightness(0);
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
.section.product.list .body .list-prd .list-icon li dl dd {
  flex: 1;
  padding: 5px 10px;
  border-left: 1px dotted var(--oc-gray-3);
  text-align: left;
}
.section.product.list .body .list-prd > ul > li > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--oc-gray-0);
}
.section.product.list .body .list-prd > ul > li > a:hover {
  background-color: var(--oc-blue-0);
}
.section.product.list .body .list-prd > ul > li > a:hover .img {
  border-color: var(--oc-blue-0);
}
.section.product.list .body .list-prd > ul > li > a:hover .text-box h5 {
  color: var(--color-blue);
}
.section.product.list
  .body
  .list-prd
  > ul
  > li
  > a:hover
  .list-icon
  li
  dl
  dt
  img {
  -webkit-filter: none;
  filter: none;
}
@media all and (max-width: 1200px) {
  .section.product.view.body .article .text-box {
    padding: var(--mg-sec-030) var(--gutter-sm);
  }
  .section.product.view.body .article .text-box .list-icon {
    margin-bottom: var(--mg-sec-030);
    gap: var(--mg-sec-030) var(--mg-sec-050);
  }
  .section.product.list .body .list-prd .text-box {
    padding: 10px;
  }
}
@media all and (max-width: 1000px) {
  .section.product.view.head .desc {
    font-size: 1em;
  }
  .section.product.view.head .info-box .desc + .item-thumb {
    margin-top: var(--mg-sec-030);
  }
  .section.product.view.body .article {
    padding-top: var(--mg-sec-050);
  }
  .section.product.view.body .article.spec tbody th {
    width: auto;
  }
  .section.product.list .body {
    padding-top: var(--mg-sec-030);
  }
  .section.product.list .body .filter-prd .list_form {
    margin-top: 10px;
  }
  .section.product.list .body .list-prd .list-prd-top,
  .section.product.list .body .list-prd .btn-box {
    margin-bottom: var(--gutter-sm);
  }
  .section.product.list .body .list-prd .list-prd-top .btn-box {
    margin: 0;
    margin-left: auto;
  }
  .section.product.list .body .list-prd .list-prd-top .list-prd-total,
  .section.product.list .body .list-prd .text-box small {
    font-size: 13px;
  }
  .section.product.list .body .list-prd .list-icon li dl {
    font-size: 13px;
  }
  .section.product.list .body .list-prd .list-icon li dl dt {
    width: 40px;
    padding: 0 5px;
  }
  .section.product.list .body .list-prd .list-icon li dl dd {
    padding: 4px 10px;
  }
  /*----------------------------------------- 0402 kjs 추가분 { -----------------------------------------*/
  .section.product.view.body
    .article
    .text-box
    .list-icon.list-03
    dd
    .flex-box {
    width: calc((100% - 10px) / 2);
  }
  .section.product.view.body .article.down .btn_custom .text h6 {
    font-size: 16px;
  }
}
@media all and (max-width: 540px) {
  .section.product.view.body .article .text-box .list-icon.list-03 dl {
    flex-wrap: wrap;
    gap: 15px;
  }
  .section.product.view.body .article .text-box .list-icon.list-03 dt {
    text-align: center;
    width: 100%;
    line-height: unset;
  }
  .section.product.view.body .article .text-box .list-icon.list-03 dd {
    width: 100%;
  }
}
@media all and (max-width: 400px) {
  .section.product.view.body
    .article
    .text-box
    .list-icon.list-03
    dd
    .flex-box {
    width: 100%;
  }
}
/*----------------------------------------- 0402 kjs 추가분 } -----------------------------------------*/

.section.banner {
  padding: 0;
  background: linear-gradient(
    to bottom,
    #fff,
    #fff 50%,
    var(--oc-gray-0) 50%,
    var(--oc-gray-0) 100%
  );
}
.section.banner .inner {
  padding-top: var(--mg-sec-080);
  padding-bottom: var(--mg-sec-080);
  background: no-repeat 50% bottom / cover;
  text-align: center;
}
.section.banner-full {
  background: no-repeat 50% bottom / cover;
}
.section.banner-full .inner {
  background: none;
}
.section.banner .title {
  font-size: 2.5em;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: var(--mg-sec-050);
}
.section.partner > .inner {
  margin-bottom: var(--mg-sec-050);
}
.section.partner .round-box {
  background-color: var(--oc-gray-0);
}
.section.partner .round-box p {
  color: var(--oc-gray-7);
}
.section.partner .round-box .cate {
  text-align: right;
  margin-bottom: 1rem;
}
.section.partner .round-box .cate svg {
  width: 32px;
  height: 32px;
}
.section.partner .round-box .tit {
  font-size: 3em;
}
.section.partner .partners {
  position: relative;
  height: 80px;
  margin-top: var(--mg-sec-030);
}
.section.partner .partners .simply-scroll {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 80px;
  transform: translateX(-50%);
}
.section.partner .partners .simply-scroll .simply-scroll-clip {
  width: 100%;
}
.section.partner .partners .simply-scroll .simply-scroll-list li {
  width: auto;
  height: 80px;
  padding: 0 20px;
}
.section.partner .partners .simply-scroll .simply-scroll-list li img {
  max-height: 80px;
  -webkit-filter: grayscale(1) brightness(1) contrast(0.5);
  filter: grayscale(1) brightness(1) contrast(0.5);
}
.section.partner .partners .simply-scroll .simply-scroll-list li:hover img {
  -webkit-filter: none;
  filter: none;
}
.section.contact {
  background-color: var(--oc-gray-0);
}
.section.contact .text-box {
  width: calc((100% - 20px) / 3);
}
.section.contact .text-box .list_contact dl {
  display: flex;
  gap: 0.5rem;
}
.section.contact .text-box .list_contact dd span {
  display: inline-block;
  background-color: var(--color-blue);
  color: #fff;
  padding: 1px 4px 0;
  border-radius: 4px;
  font-size: 0.8em;
}
.section.contact .form-box {
  flex: 1;
  background: #fff;
  border: 1px solid var(--oc-gray-1);
  padding: var(--gutter-lg);
}
.section.contact .form-box .form_custom dt {
  width: 9em;
}
.section.contact .form-box .form_custom .input {
  width: 100%;
  max-width: 30em;
}
.section.contact.esti {
  background-color: var(--oc-violet-0);
}
.section.contact.tech {
  background-color: var(--oc-indigo-0);
}
.section.contact.demo {
  background-color: var(--oc-blue-0);
}
.section.contact.field {
  background-color: var(--oc-cyan-0);
}
.section.contact.esti .form-box {
  border-color: var(--oc-violet-1);
}
.section.contact.tech .form-box {
  border-color: var(--oc-indigo-1);
}
.section.contact.demo .form-box {
  border-color: var(--oc-blue-1);
}
.section.contact.field .form-box {
  border-color: var(--oc-cyan-1);
}
.section.contact.esti .title strong,
.section.contact.esti .text-box .btn_custom.txt {
  color: var(--oc-violet-7);
}
.section.contact.tech .title strong,
.section.contact.tech .text-box .btn_custom.txt {
  color: var(--oc-indigo-7);
}
.section.contact.demo .title strong,
.section.contact.demo .text-box .btn_custom.txt {
  color: var(--oc-blue-7);
}
.section.contact.field .title strong,
.section.contact.field .text-box .btn_custom.txt {
  color: var(--oc-cyan-7);
}
@media all and (max-width: 1400px) {
  .section.banner .title {
    font-size: 2em;
  }
  .section.partner .round-box .tit {
    font-size: 2.5em;
  }
}
@media all and (max-width: 1200px) {
  .section.partner .round-box .cate svg {
    width: 24px;
    height: 24px;
  }
  .section.contact .form-box {
    padding: var(--gutter-sm) 10px var(--mg-sec-030);
  }
}
@media all and (max-width: 1000px) {
  .section.contact .text-box {
    width: calc((100% - 20px) / 2);
  }
  .section.contact .form-box .form_custom dl {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .section.contact .form-box .form_custom dt {
    width: 100%;
  }
}
@media all and (max-width: 768px) {
  .section.banner .inner {
    padding-top: var(--mg-sec-050);
    padding-bottom: var(--mg-sec-050);
  }
  .section.banner .title {
    margin-bottom: var(--mg-sec-030);
  }
  .section.banner .title,
  .section.partner > .inner {
    margin-bottom: var(--mg-sec-030);
  }
  .section.partner .round-box .tit {
    font-size: 2.25em;
  }
  .section.contact > .inner {
    flex-direction: column;
  }
  .section.contact .text-box,
  .section.contact .form-box {
    width: 100%;
  }
  .section.partner .partners {
    height: 60px;
  }
  .section.partner .partners .simply-scroll {
    height: 60px;
  }
  .section.partner .partners .simply-scroll .simply-scroll-list li {
    height: 60px;
  }
  .section.partner .partners .simply-scroll .simply-scroll-list li img {
    max-height: 60px;
  }
}

#footer {
  width: 100%;
  color: var(--oc-gray-6);
  padding: var(--mg-sec-030) 0;
  font-size: 14px;
  word-break: keep-all;
}
#footer .inner {
  display: flex;
  gap: var(--mg-sec-030) var(--gutter-sm);
}
#footer .inner > .foot {
  flex: auto;
  position: relative;
}
#footer .inner > .foot:last-child {
  margin-left: auto;
  flex: none;
  width: 15.25em;
}
#footer .logo a {
  display: flex;
  align-items: center;
  height: 48px;
}
#footer .logo a img {
  height: 48px;
  -webkit-filter: grayscale(1) brightness(1) contrast(0.5);
  filter: grayscale(1) brightness(1) contrast(0.5);
}
#footer #fnb a,
#footer .addr a {
  color: var(--oc-gray-7);
}
#footer #fnb a:hover,
#footer .addr a:hover {
  color: var(--oc-gray-9);
}
#footer .addr > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5em;
}
#footer .addr > li:last-child {
  display: none;
}
#footer .addr dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
}
#footer .addr dl dt {
  font-family: var(--font-title);
  font-weight: 600;
}
#footer .addr address {
  display: inline;
}
#footer .sns {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}
#footer .sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  font-size: 1.5em;
  color: #fff;
  background-color: var(--oc-gray-4);
  border-radius: 4px;
}
#footer .sns a:hover {
  background-color: var(--oc-gray-9);
}
#footer .form_custom .select {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-family: var(--font-title);
  width: 100%;
}
#footer .copyright {
  margin-top: 0.5rem;
  color: var(--oc-gray-5);
  font-size: 13px;
}
#footer #fnb {
  margin-bottom: 0.5rem;
}
#footer #fnb ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#footer #fnb ul + ul {
  margin-top: 0.25rem;
}
#footer #fnb ul li {
  padding-right: 0.5rem;
}
#footer #fnb ul li:after {
  content: "｜";
  padding-left: 0.5rem;
  color: var(--oc-gray-3);
}
#footer #fnb ul li:last-child {
  padding-right: 0;
}
#footer #fnb ul li:last-child:after {
  content: "";
  padding-left: 0;
}
@media all and (max-width: 1200px) {
  #footer {
    font-size: 13px;
  }
  #footer .inner > .foot:last-child {
    flex: 1;
    width: 17.5em;
  }
  #footer .copyright {
    font-size: 12px;
  }
  #footer .sns a {
    width: 1.75em;
    height: 1.75em;
  }
  #footer .form_custom .select {
    width: auto;
    min-width: 16em;
  }
}
@media all and (max-width: 1000px) {
  #footer .logo a {
    height: 36px;
  }
  #footer .logo a img {
    height: 36px;
  }
  #footer .inner {
    flex-direction: column;
  }
  #footer .inner > .foot:last-child {
    margin-left: 0;
    width: 100%;
  }
  #footer .addr,
  #footer .addr > li:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5em;
  }
}

.mo-only {
  display: none;
}
@media all and (max-width: 1000px) {
  .pc-only {
    display: none;
  }
}
@media all and (max-width: 768px) {
  .ta-only {
    display: none;
  }
  .mo-only {
    display: block;
  }
}
.max_wide,
.max_pc,
.max_ta,
.max_mo {
  display: none !important;
}
@media all and (max-width: 1200px) {
  .min_wide {
    display: none !important;
  }
  .max_wide {
    display: block !important;
  }
}
@media all and (max-width: 1000px) {
  .min_pc {
    display: none !important;
  }
  .max_pc {
    display: block !important;
  }
}
@media all and (max-width: 768px) {
  .min_ta {
    display: none !important;
  }
  .max_ta {
    display: block !important;
  }
}
@media all and (max-width: 540px) {
  .min_mo {
    display: none !important;
  }
  .max_mo {
    display: block !important;
  }
}

/* bbs */
.mb_log_cate h2,
.mb_log_cate .join {
  font-size: 16px;
}
#login_fs > legend {
  display: none;
}
#login_fs .chk_box input[type="checkbox"] + label span {
  margin-top: 5px;
  margin-right: 3px;
}
.bo_tit {
  font-family: var(--font-title);
  letter-spacing: -0.01em;
}
#bo_w {
  margin-bottom: var(--mg-sec-100);
}
#bo_v_title .bo_v_tit {
  font-family: var(--font-title);
  letter-spacing: -0.01em;
  font-size: 1.5em !important;
}
.form_custom .form-check-input::before {
  display: none;
}
.form_custom.product .list_form > li {
  border-top: 1px solid var(--oc-gray-3);
}
.form_custom.product .list_form > li:last-child {
  border-bottom: 1px solid var(--oc-gray-3);
}
.form_custom.product .list_form .file_wr dt,
.form_custom.product .list_form .file_wr dt label {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.form_custom.product .list_form .file_wr dt i {
  font-size: 1.75em;
}
.form_custom.product .list_form .input-group .btn {
  min-height: 38px;
  display: flex;
  align-items: center;
}
.list_form.wr_download_link .wr_download_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter-sm);
  align-items: center;
}
.list_form.wr_download_link .wr_download_wrap .wr_download_link_tit,
.list_form.wr_download_link .wr_download_wrap .wr_download_link_con {
  flex: 1;
}
.list_form.wr_download_link
  .wr_download_wrap
  .wr_download_link_con
  input
  + input {
  margin-top: 0.5em;
}
#bo_w .form_custom dt,
#bo_v .form_custom dt {
  width: 11em;
  font-family: var(--font-title);
}
#bo_w .form_custom .input,
#bo_v .form_custom .input {
  width: 100%;
  max-width: 30em;
}
#bo_w .form_custom.product #wr_homepage {
  margin-left: 0;
}
#bo_w .btn_confirm {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
#bo_v_con .list_form {
  padding-left: 0;
}
#bo_v_share .btn {
  width: auto !important;
}
#bo_cate ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#bo_cate li {
  padding: 0;
}
#bo_cate a {
  background-color: transparent;
  border-color: var(--oc-gray-7) !important;
  color: var(--oc-gray-9) !important;
  padding: 0 1em !important;
  font-weight: 500;
  font-family: var(--font-title);
  text-align: center;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  height: 2.5rem;
  font-size: 1em;
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
#bo_cate a:focus,
#bo_cate a:hover,
#bo_cate a:active {
  background: transparent !important;
  border-color: var(--color-blue) !important;
  color: var(--color-blue) !important;
}
#bo_cate #bo_cate_on {
  background: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#bo_v_title {
  font-family: var(--font-title);
}
#bo_v_title .bo_v_cate {
  background: transparent !important;
  color: var(--color-blue) !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  height: auto !important;
  font-size: 0.6em;
  font-family: var(--font-title);
}
.bo_cate_link {
  background: transparent !important;
  color: var(--color-blue) !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  height: auto !important;
  margin-bottom: 0.25rem;
}
#bo_gall .gall_text_href {
  position: relative;
  margin: 1rem 0 10px !important;
}
#bo_gall #gall_ul .bo_tit {
  font-family: var(--font-title);
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
  font-size: 1.2em;
  font-weight: 500;
}
#bo_gall .bo_cnt {
  line-height: 1.5 !important;
}
#bo_gall .gall_date.edit {
  /*position:absolute; top:0; right:0;*/
  color: var(--oc-gray-7);
  font-size: 0.9em; /*font-style:italic;*/
}
#bo_gall #gall_ul {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -20px 0 !important;
}
#bo_gall #gall_ul:after {
  display: none;
}
#bo_gall #gall_ul .empty_list {
  width: 100%;
}
#bo_gall .gall_li {
  padding-left: 20px;
  padding-right: 20px;
}
#bo_gall .gall_li .gall_img {
  height: auto !important;
  max-height: 100% !important;
  border-radius: 1em;
  border: 1px solid var(--oc-gray-2);
}
#bo_gall .gall_li .gall_img img {
  filter: grayscale(1);
  -webkit-transition: var(--transition-fast);
  transition: var(--transition-fast);
}
#bo_gall .gall_li:hover .gall_img img {
  filter: grayscale(0);
}
#bo_gall .gall_li .gall_chk input[type="checkbox"] + label span {
  top: -10px;
  left: 5px;
}
#bo_list .section.product.list {
  padding-top: 0;
}
#bo_list .section.product.list .body {
  padding-top: 0;
}
#bo_list .section.product.list ~ .pg_wrap {
  float: none;
  display: flex;
  justify-content: center;
}
#bo_w .form_custom dt.wr_content3_tit,
#bo_w .form_custom dt.wr_download_link_tit {
  padding: 0;
}
#bo_list .txt_done,
#bo_v_rel .txt_done {
  background-color: var(--color-blue) !important;
}
#bo_v_ans h2,
#bo_v_ans_form h2 {
  font-family: var(--font-title);
}
#bo_v_ans h2 span {
  border-color: var(--color-blue) !important;
  color: var(--color-blue) !important;
  font-size: 12px !important;
  line-height: 20px !important;
}
.more_opt li {
  width: 100px;
}
@media all and (max-width: 1000px) {
  .form_custom.product .list_form .file_wr dt i {
    font-size: 1.5em;
  }
  #bo_w .form_custom dl,
  #bo_v .form_custom dl {
    flex-direction: column;
    gap: 5px;
  }
  #bo_w .form_custom dt,
  #bo_v .form_custom dt,
  #bo_w .form_custom dd,
  #bo_v .form_custom dd {
    width: 100%;
  }
  #bo_w .form_custom dt.wr_content3_tit,
  #bo_w .form_custom dt.wr_download_link_tit {
    max-width: 240px;
  }
  #bo_gall #gall_ul {
    margin: 10px -10px 0 !important;
  }
  #bo_gall .gall_li {
    padding-left: 10px;
    padding-right: 10px;
  }
  #bo_gall .gall_li .gall_img img {
    filter: grayscale(0);
  }
  .gall_row .col-gn-3 {
    width: 50% !important;
  }
  .gall_row .col-gn-4 {
    width: 50% !important;
  }
  .list_form.wr_download_link .wr_download_wrap {
    flex-direction: column;
    gap: 5px;
  }
  .list_form.wr_download_link .wr_download_wrap li {
    width: 100%;
  }
  #bo_cate a {
    height: 2rem;
    font-size: 0.9em;
  }
  #bo_cate ul.cate_wrap li {
    width: calc((100% - calc(0.5rem * 4)) / 5);
  }
  #bo_cate ul.cate_wrap li a {
    width: 100%;
  }
}
@media all and (max-width: 768px) {
  #bo_cate ul.cate_wrap li {
    width: calc((100% - calc(0.5rem * 3)) / 4);
  }
}
@media all and (max-width: 540px) {
  #bo_cate ul.cate_wrap li {
    width: calc((100% - calc(0.5rem * 2)) / 3);
  }
}
@media all and (max-width: 400px) {
  #bo_cate ul.cate_wrap li {
    width: calc((100% - calc(0.5rem * 1)) / 2);
  }
  .gall_row .col-gn-3 {
    width: 100% !important;
  }
  .gall_row .col-gn-4 {
    width: 100% !important;
  }
}

/* login */
#login_password_lost {
  color: var(--color-blue);
}
.mb_log_cate .join {
  font-size: 1.125em;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.mbskin.flex {
  display: flex;
  font-family: var(--font-text);
  color: var(--color-bg-txt);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
}
.mbskin.flex .lo_img {
  flex: 1;
  background: url("../img/front/bg_banner_dark.jpg") no-repeat 50% 50% / cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mbskin.flex .mbskin_box {
  display: flex;
  flex: 1;
}
.mbskin.flex .mbskin_box > form {
  max-width: 400px;
}
.mbskin.flex .logo {
  text-align: center;
  font-family: var(--font-tit-unique);
  margin-bottom: 1em;
}
.mbskin.flex .logo a {
  color: var(--color-tone-800);
}
.mbskin.flex .login_if_auto label.flex {
  display: flex;
}
.mbskin.flex #login_info.flex {
  display: flex;
  justify-content: center;
}
.mbskin.flex .mb_log_cate {
  padding-right: 12px;
}
.mbskin.flex .mb_log_cate:after {
  top: 50%;
  margin-top: -7px;
}
.mbskin.flex .form-control {
  margin-bottom: 0.5em;
}
.mbskin.flex .btn_submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.5em;
}
.mbskin.flex .chk_box {
  margin: 1em 0 0.5em;
}
.mbskin.flex .chk_box input[type="checkbox"] + label {
  cursor: pointer;
}
.mbskin.flex .chk_box input[type="checkbox"] + label:hover {
  color: var(--oc-gray-9);
}
.mbskin.flex .mb_log_cate {
  width: 100%;
  padding-right: 0;
  margin-top: 0.5em;
}
.mbskin.flex .mb_log_cate .join {
  width: 100%;
  justify-content: center;
  border-radius: 4px;
}
@media all and (max-width: 1000px) {
  .mbskin.flex {
    align-items: center;
    background: url("../img/front/bg_banner_dark.jpg") no-repeat 50% 50% / cover;
    padding: var(--gutter-sm);
  }
  .mbskin.flex .lo_img {
    display: none;
  }
  .mbskin.flex .mbskin_box {
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
  }
  .mbskin.flex #login_fs {
    padding: var(--mg-sec-030);
  }
}