@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap");
:root {
  /*brand colors*/
  --brand-primary: #71b6f9 !important;
  --brand-primary-darken: #5aacff !important;
  --brand-secondary: #ffc631;
  
  
  --bs-blue: #71b6f9 !important;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #71b6f9 !important;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13,110,253;
  --bs-secondary-rgb: 108,117,125;
  --bs-success-rgb: 25,135,84;
  --bs-info-rgb: 13,202,240;
  --bs-warning-rgb: 255,193,7;
  --bs-danger-rgb: 220,53,69;
  --bs-light-rgb: 248,249,250;
  --bs-dark-rgb: 33,37,41;
  --bs-white-rgb: 255,255,255;
  --bs-black-rgb: 0,0,0;
  --bs-body-color-rgb: 33,37,41;
  --bs-body-bg-rgb: 255,255,255;
  --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #71b6f9 !important;
  --bs-link-hover-color: #333 !important;
  --bs-code-color: #d63384 !important;
  --bs-highlight-bg: #fff3cd !important;

}
.btn-primary{
    --bs-btn-color: #fff;
    --bs-btn-bg: #3a9bfd !important;
    --bs-btn-border-color: #3a9bfd !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;

}


html,
body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  /* background: #001f3f !important; */
  background: #FFF !important;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
}
body {
  font-family: "Noto Sans KR", sans-serif;
  color: #000810;
  font-weight: normal;
  letter-spacing: -0.02em;
  overflow-x: hidden;
  height: auto;
}
@media screen and (max-width: 600px) {
  html,body{
    font-size: 12px;
  }
}

* {
  /* -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; */
}
*::-webkit-scrollbar {
  display: none;
}

*:focus {
  outline: none !important;
}

/* layouts */
#header {
  height: 0;
  position: relative;
}
#header * {
  color: #fff;
  transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
#header > .navbar {
  height: 150px;
  align-items: center;
  position: fixed;
  z-index: 999;
  left: 0;
  right: 0;
  top: 0;
}
#header > .navbar .navbar-brand {
  height: 64px;
  width: 350px;
  background-image: url("/img/logo_white.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  display: block;
}
body.scrolled #header > .navbar {
  height: 100px;
  background-color: #fff;
  box-shadow: 0 5px 13px rgba(0, 31, 63, 0.1);
}
body.scrolled #header * {
  color: #000810;
}
body.scrolled #header .navbar-brand {
  height: 50px;
  background-image: url("/img/logo.png");
}
#header .navbar-nav {
  gap: 25px;
}
#header .navbar-nav .nav-item .nav-link {
  font-size: 22px;
  opacity: 0.7;
  transition: 100ms linear;
}
#header .navbar-nav .nav-item .nav-link:hover {
  opacity: 1;
}
#header .navbar-nav .nav-item .nav-link.active {
  opacity: 1;
  border-bottom: 1px solid var(--brand-secondary);
}

#app {
  background-color: #fff;
}
#app > section {
  padding: 70px 0;
}
#app > section:nth-child(odd) {
  background-color: #001f3f;
  color: #fff;
}

#footer {
  background-color: transparent;
}
#footer * {
  color: #fff;
}

/* components */
._titler {
  color: inherit;
}
._titler ._title_eng {
  display: flex;
  align-items: center;
  height: 1em;
  font-size: 18px;
  height: 1.2em;
  gap: 20px;
}
._titler ._title_eng > ._bar {
  width: 40px;
  position: relative;
}
._titler ._title_eng > ._bar:after {
  content: "";
  width: 40px;
  height: 2px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1px;
  background-color: var(--brand-secondary);
}
._titler ._title_eng > ._bar._full:after {
  width: 10000px;
}

._titler ._title_eng > span {
  font-size: 1em;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0em;
}
._titler ._title {
  display: block;
  margin: 15px 0;
  font-size: 48px;
  line-height: 1.3;
  font-weight: bold;
}
._titler > p {
  line-height: 1.5;
  font-size: 19px;
  font-weight: 400;
  /* max-width: 500px; */
}
._titler > ._nav {
  display: inline-flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
._titler > ._nav > a {
  text-decoration: none;
  color: #fff;
}
._titler > ._nav > ._bar {
  width: 30px;
  height: 1px;
  background-color: #fff;
}
span.brand-primary {
  color: var(--brand-primary);
}

.default_header {
  background-image: url("/img/main/bg2.jpg");
  background-size: cover;
  background-position: center;

  width: 100%;
}
.default_header .container {
  display: flex;
  align-items: center;
  color: #fff;
  height: 430px;
  padding-top: 100px;
}




/* 230126 ym 사이트 없애달라고함 */
#header,
#footer,
.default_header {
  display: none !important;
}

#app {
  height: 100vh;
  display: flex;
}



/* after 2023.04.22 */
.form-signin{
  max-width: 500px;
  margin: 0 auto;
}





/* ym 202311~ */
.container,
#sit{
  width: 100%;
  margin: 0 auto !important;
  max-width: 1240px !important;
}
@media screen and (max-width: 600px) {
  .container{
    padding: 0 20px !important;
  }
}



/* header */
#hd{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 99;
  min-height: 120px;
  display: flex;
  align-items: center;
  transition: 300ms;

  /* background-color: transparent; */
  background-color: rgb(10 14 31 / 78%);
  color: #FFF;
  backdrop-filter: blur(3px);
}
#hd > .container {
  height: 100%;
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#hd .topnav {
  overflow: hidden;
  height: 100%;

  display: flex;
  align-items: center;
  padding-top: 30px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#hd .logo {
  height: 60px;
  width: 200px;
  background-image: url(/img/home/logo-white.svg);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  flex-shrink: 0;
}

#hd .micon {
  display: none;
}

#hd .topnav a {
  display: inline-flex;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 15px;
  color: inherit;
  line-height: 1;
  flex-shrink: 0;
}
#hd .topnav a.fill{
  margin: 0 0 0 8px;
}

/* #hd .topnav a.active - 녹색 강조 제거됨 */

.scrolled #hd,
#hd.mopen{
  background-color: rgba(255,255,255,0.8);
  color: #333;
}
.scrolled #hd .logo,
#hd.mopen .logo{
  background-image: url(/img/home/logo.svg);
}

@media screen and (max-width: 1024px) {
  #hd .topnav a {
    padding: 14px 8px;
    font-size: 14px;
  }
  #hd .logo {
    width: 160px;
  }
}

@media screen and (max-width: 768px) {
  #hd{
    min-height: 60px;
  }
  #hd .container{
    padding: 0 10px;
  }
  #hd .micon{
    color: #FFF;
    height: 60px;
    display: flex;
    align-items: center;
    font-size: 1.5em;
    padding: 0 10px;
  }
  #hd .logo{
    height: 32px;
    width: 140px;
  }
  #hd .topnav{
    display: none;
    height: 0;
    overflow: hidden;
    transition: 300ms;
    padding: 0;
  }
  #hd .topnav a.fill{
    margin: 10px 0 0 0;
  }

  #hd.mopen{
  }
  #hd.mopen > .container{
  }
  #hd.mopen .topnav {
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 10px;
    backdrop-filter: blur(3px);
    background-color: rgba(255,255,255,0.8);
    color: #333;
    height: 100vh;
    white-space: normal;
  }
  #hd .topnav a{
    font-weight: 600;
  }

  .scrolled #hd .micon,
  #hd.mopen .micon{
    color: #333;

  }
}

@media screen and (max-width: 600px) {
  #hd{
    min-height: 60px;
  }
}



/* headerImage */
#headerImage{
  width: 100%;
  position: relative;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-direction: column;
  text-align: center;
  color: #FFF;
  font-size: 1em;
  gap: 1.5em;
  padding-top: 60px;
  box-sizing: content-box;

}
#headerImage.in_index{
  height:99vh;
}
#headerImage.in_page{
  height:30vh; max-height:300px;
  padding-top: 120px;
  background-image: url('/img/home/main-img-2-dark.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 600px) {
  #headerImage.in_page{
    height:150px; max-height:150px;
    padding: 70px 0 20px;
  }
}
#headerImage #top_title{
  line-height: 1; 
  font-size: 2.5em;
  font-weight: 600;
  height: 1.1em;
  display: block;
}
#headerImage #top_description{
  font-size: 1.2em;
  line-height: 1.5;
  font-size: 500;
}
#headerImage #top_button{
  color: inherit;
  font-size: 1.5em;
  font-weight: 300;
  background: rgba(0,0,0,0.2);
  height: 3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2em;
  border-radius: 100px;
  border: 1px solid #FFF;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* body */
#wrapper{
  /* padding handled by headerImage or page-specific styles */
}




/* shop overide */
#sit_ov_wrap{
  display: grid !important;
  width: 100% !important;
  grid-template-columns: 500px 1fr !important;
  gap: 50px;
  align-items: flex-start;
}
#sit_ov_wrap > *{
  flex-shrink: 0;
  width: auto !important;
}
#sit_ov_btn{
  display: grid !important;
  width: 100% !important;
  /* grid-template-columns: 2fr 3fr 1fr !important; */
  align-items: stretch;
  gap: 10px;
}
#sit_ov_btn > *{
  width: auto !important;
  margin: 0 !important;
}
#sit_info{
  display: grid !important;
  width: 100% !important;
  grid-template-columns: 1fr 300px !important;
}
#sit_info > *{
  flex-shrink: 0;
  width: auto !important;
}


#sit_orderform{
  display: grid !important;
  width: 100% !important;
  grid-template-columns: 1fr 400px !important;
  gap: 20px;
  align-items: flex-start;
}

#sit_ov_from,
#sit_ov_wrap{
  border: none !important;
}
.shop_select_to_html{
  pointer-events: none !important;
}
.shop_select_to_html .category_title i{
  display: none !important;
}
#sit_opt_added li, 
.sit_sel_option li{
  display: flex;
  justify-content: space-between;
}
#sit_opt_added li:after, 
.sit_sel_option li:after{
  display: none;
}
#sit_opt_added li .opt_count,
.sit_sel_option li .opt_count{
  display: flex;
  align-items: center;
}
#sit_opt_added .sit_opt_prc,
.sit_sel_option li .sit_opt_prc{
  order: -1;
  margin-right: 0.5em;
  color: gray;
  width: auto;
  font-size: 0.9em;
  font-weight: normal;
}
.sit_sel_option{
  height: auto;
}
.sit_sel_option .opt_name{
  font-size: 1.2em;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

@media (max-width: 768px) {
  #sit_ov_wrap,
  #sit_info,
  #sit_orderform{
    gap: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    width: 100vw !important;
    align-items: stretch;
  }
  #sit_ov{
    padding: 20px;
  }
  #sit_buy{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #FFF;

    transform: translateY(100%);
    transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  #sit_buy.mopen{
    transform: translateY(0%);
  }
  #sit_buy .mopen_handle{
    height: 50px; 
    position: absolute; 
    background: #3a9bfd; 
    color: #FFF; 
    font-size: 1.2em;
    font-weight: bold;
    width: 200px; 
    margin: 0 auto; 
    top: -50px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    left: 0; 
    right: 0; 
    border-top-left-radius: 16px; 
    border-top-right-radius: 16px;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.125);
  }
  #sit_buy.mopen .mopen_handle{
    height: 100vh;
    top: -100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.5);
    font-size: 0;
  }
  #sit_buy .sit_order_btn{
    display: flex;
    align-items: stretch;
    gap: 10px;
  }
  #sit_buy .sit_order_btn > *{
    margin: 0;
  }
  #sit_tab .tab_con{
    padding: 0;
    margin: 0;
  }
  #sit_qa,
  #sit_dex{
    padding: 20px;
    margin: 0;
  }

  #sod_frm{
    margin: 0 -20px;
    padding: 0 10px;
    background-color: #FFF;
  }
  .sod_frm_mobile #sod_frm_orderer h2, .sod_frm_mobile #sod_frm_taker h2{
    padding: 0 0 10px;
  }
  .sod_frm_mobile #m_sod_frm_paysel{
    margin: 10px 0 0 0 ;
  }
}





/* mypage */
#mypage{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  padding: 30px 0;
  align-items: flex-start;
}
#mypage > ._l{
  background: #FFF;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#mypage > ._l ._profile{
  padding: 20px 20px 0;  
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.2em;
  font-weight: bold;
}
#mypage > ._l ._submenu{
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}
#mypage > ._l ._submenu > a{
  padding: 10px 20px;
}
#mypage > ._r > section{
  background: #FFF;
  border-radius: 18px;
  padding: 20px;
}
@media screen and (max-width: 600px) {
  #mypage{
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
  }
  #mypage > ._l{
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap:0;
  }
  #mypage > ._l ._profile{
    padding: 10px;
    gap: 10px;
  }
  #mypage > ._l ._profile .profileImage{
    width: 40px;
    border-radius: 12px;
  }
  #mypage > ._l ._submenu{
    flex-direction: row;
    padding-bottom: 0;
    padding: 0 10px;
  }
  #mypage > ._l ._submenu > a{
    padding: 10px;
  }
  .tbl_head03 thead th{
    font-size: 1em;
    font-weight: 500;
  }
}


/* body background removed for Node.js version */
 
 
 @keyframes blink {
   40% {
     opacity:.5;
   }
   80% {
     opacity: 1;
   }
 }
 
 

#askcounselform{
  /* display: grid; 
  grid-template-columns: 1fr 200px;  */
  display: flex;
  flex-direction: column;
  gap: 20px; 
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto;
}
#askcounselform > div:nth-child(1){
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#askcounselform > div:nth-child(1) > div:nth-child(1){
  display: flex;
  gap: 20px;
}
#askcounselform .form-floating {
  flex: 1;
}
#askcounselform textarea {
  min-height: 100px;
}
#askcounselform .btn {
  width: 100%;
}
@media (max-width: 768px) {
  #askcounselform{
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  #askcounselform > div:nth-child(1) > div:nth-child(1){
    flex-direction: column;
  }
}



.comp.main-item{
  position: relative;
  width: 100%;
  max-width: 400px;
  display: inline-block;
}
.comp.main-item > img{
  border-radius: 12px;
  width: 100%;
  display: block;
  margin-right: 11%;
}
.comp.main-item > ._desc{
  position: absolute;
  width: 70%;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 13px rgba(0, 31, 63, 0.1);
  text-align: left;
  right: -11%;
  bottom: -11%;
  z-index: 1;
  background: #FFF;
}



br.xs-br{
  display: none;
}
@media screen and (max-width: 600px) {
  br.xs-br{
      display: block;
  }
}

/* Additional utility classes for Node.js version */
.bg-gray-lighter { background-color: #f5f5f5; }
.bg-white { background-color: #fff; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-120 { margin-top: 120px; }
.xs-mt-40 { }
@media screen and (max-width: 600px) {
  .xs-mt-40 { margin-top: 40px !important; }
}
.pa-30 { padding: 30px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.xs-pa-20 { }
@media screen and (max-width: 600px) {
  .xs-pa-20 { padding: 20px !important; }
}
.border-radius { border-radius: 12px; }
.box-shadow { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); }
.gap10 { gap: 10px; }
.left { justify-content: flex-start; }
.center { align-items: center; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.only-pc { }
@media screen and (max-width: 600px) {
  .only-pc { display: none; }
}

/* Footer styles */
#ft {
  background: #FFF;
  color: #333;
  margin: 0 auto;
}
#ft_wr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0 60px;
  position: relative;
}
#ft_company {
  flex: 1;
}
#ft .ft_info {
  font-size: 14px;
  line-height: 2;
  color: #666;
}
#ft .ft_info big {
  font-size: 18px;
  color: #333;
}
#ft .ft_info span {
  margin-right: 15px;
}
#ft .ft_info b {
  color: #999;
  font-weight: 400;
  margin-right: 5px;
}
#ft_copy {
  font-size: 13px;
  color: #999;
}
#ft_link {
  display: flex;
  gap: 2em;
  flex-shrink: 0;
  align-items: flex-start;
}
#ft_link a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
}
#ft_link a:hover {
  color: #000;
  text-decoration: underline;
}
.text-gray {
  color: #999 !important;
}
.width100 {
  width: 100%;
}
.xs-px-20 { }
@media screen and (max-width: 600px) {
  .xs-px-20 { padding-left: 20px !important; padding-right: 20px !important; }
  #ft_wr {
    flex-direction: column;
    gap: 20px;
    padding: 25px 0 40px;
  }
  #ft_wr #ft_copy {
    order: 1;
  }
  #ft_wr #ft_company {
    order: 2;
  }
  #ft_link {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #ft_link a {
    margin-right: 15px;
  }
}