/* ---------------------------------- FontFile ----------------------------------*/

@font-face {
    font-family: 'Pretendard-Regular' !important;
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

/* Reset All */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML5 Display-Role Reset */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* HTML5 Hidden Attribute Reset */
[hidden] {
    display: none;
}

/* Typography Reset */
body {
    line-height: 1.5;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Lists Reset */
ul, ol {
    list-style: none;
}

/* Links Reset */
a {
    text-decoration: none;
    color: inherit;
}

/* Table Reset */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Images and Media Reset */
img, picture, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Forms Reset */
input, button, textarea, select {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* Button Reset */
button {
    cursor: pointer;
    background-color: transparent;
    border: none;
}

/* General Reset */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ---------------------------------- Custom basic css ----------------------------------*/
html{height:100%;font-weight: normal;width:100%;}
a {text-decoration:none}
table {border-collapse:collapse;border-spacing:0}
body {width:100%;height:auto;line-height: 1;position: relative;word-break: keep-all;margin:0;padding:0;
	background:none;font-family:'Pretendard-Regular' !important;font-family:' Apple SD 산돌고딕 Neo', 'Droid sans'; color:#333;overflow-x:hidden;}
body * { box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; }
ol, ul {list-style: none;}
p, ul, li, ol, dl, dt, dd, figure {padding: 0;margin: 0;}
a {text-decoration: none;color: inherit;cursor: pointer;}
img {vertical-align: middle;max-width: 100%;height: auto;}
h1, h2, h3, h4, h5, h6 {font-family:'Pretendard-Regular' !important;font-family:' Apple SD 산돌고딕 Neo', 'Droid sans';color: inherit;margin: 0;font-weight: bold;}
button, textarea, input, select {font-family:'Pretendard-Regular' !important;font-family: ' Apple SD 산돌고딕 Neo', 'Droid sans';color: inherit;padding: 0;}
button {border:0;}
h3{font-size:30px;font-size:1.875rem;text-align:center;}
.bold{font-weight: bold;}
div,span,p , table, a{font-size:16px !important;font-size:1rem !important;}
select, input, textarea{border:1px solid #cbcbcb !important}

/* ---------------------------------- 공통 custom----------------------------------*/
.mobile{display:none !important}
.desktop{display:inline-block !important}
section{position:relative}
.container{width:85%;position:relative;margin:0 auto;padding:0;}
.content-head{margin:200px 0 30px;text-align: center;}
.content-head p{margin-top:20px}
.white{color:#fff;}
.blue{color:#005EC9;}
.gray{color:#686868;}
.error-message{color:red;font-size:0.813rem;font-size:13px;}
.error-message::before{content: '※';}
textarea::placeholder , input::placeholder{color:#d1d1d1;font-size:14px;font-size:0.875rem;}
.lg{font-size:1.25rem !important;font-size:20px !important;font-weight: bold;}
.bold{font-weight: bold;}

/*header*/
.menu-trigger{display:none;}
header{display:flex;display:-webkit-flex;display:-ms-flex;justify-content: space-between;-webkit-justify-content: space-between;align-items: center;height:100px;padding:0 80px;background:#fff;border-bottom:1px solid #dee2e6;
        position:fixed;top:0;left:0;width:100%;z-index: 99;}
header .logo{width:100px;}
header .category-wrap > ul{display:flex;display:-ms-flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; text-align: center;}
header .category-wrap > ul > .category-fir{width:200px;position:relative;}
header .category-wrap > ul > .category-fir.active{transition: 3s;}
header .category-wrap > ul > .category-fir .category-name{line-height: 100px;display:inline-block;font-size:18px !important; font-size:1.125rem !important;font-weight: bold;}
header .category-wrap > ul > .category-fir.active .category-name{color:#005EC9}
header .category-wrap .category-sec{position:absolute;width:200px;background: #fff;border:1px solid #DDDDDD;border-radius:10px;display:none;z-index: 10;top:75px;}
header .category-wrap .category-sec li a{padding:15px 0;height:100%;display:inline-block;width:100%;}
header .category-wrap .category-sec li:first-child:hover{border-top-left-radius: 10px;border-top-right-radius: 10px;}
header .category-wrap .category-sec li:last-child:hover{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
header .category-wrap .category-sec li:hover{background:#005EC9;cursor: pointer;}
header .category-wrap .category-sec li:hover a{color:#fff;}
header .category-wrap .category-fir.active .category-sec{display:block;}

/*footer*/
footer{padding:50px 70px;background:#F5F5F5;}
footer .footer-url{padding-bottom:15px;border-bottom:1px solid #9A9A9A;font-size:0.813rem;font-size:13px;}
footer .footer-url a::after{content:'|';display: inline-block;padding:0 8px;color:#9A9A9A;font-size:0.75rem;font-size:12px;}
footer .footer-url a:hover{color:#005EC9;transition: all 0.2s ease-in-out;}
footer .footer-url a:last-child:after{display:none;}
footer .company-info{padding:15px 0;line-height: 25px;display:flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;}
footer .company-info img{width:120px;margin-right:20px;}
footer .company-info p{font-size:0.813rem !important;font-size:13px !important;}

/*popup*/
.popup-wrap{width:100%;height:100%;background:#00000050 !important;position:absolute;z-index: 999;top:0;left:0;overflow-y: hidden;}
.popup-wrap .popup-inner{width:80%;background:#fff;border-radius: 20px;padding:50px;transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;z-index: 9999;max-height: 90%;}
.popup-wrap .popup-inner-sm{text-align: center;width:30%;background:#fff;border-radius: 20px;padding:50px;transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;z-index: 9999;}
.popup-wrap .popup-inner-sm p{font-weight: bold;margin-bottom:50px;}
.popup-wrap .popup-inner-sm .button-wrap{width:100%;}
.popup-wrap .popup-inner-sm .button-wrap button{width:45%;background:#ededed;height: 45px;}
.popup-wrap .popup-inner-sm .button-wrap button:first-child{background:#005EC9;color:#fff;margin-right:10px;}

/*table*/
table{width:100%;}
table td{padding:20px 8px;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6;}
table td:last-child{border-right:0;}
table th{background: #f6f6f6; padding: 20px 8px;border-right:1px solid #dee2e6;}
table th:last-child{border-right:0;}
table tbody tr:nth-child(even){background:#f6f6f6;}

/* ---------------------------------- form design ----------------------------------*/
.form-btn{padding:7px;background:#ebebeb;color:#333;border-radius: 5px;font-size:15px;font-size:0.938rem;position:absolute;right:15px;top: 50%;transform: translate(0, -50%);border:none !important;
            min-width: auto;display:flex;display:-webkit-flex;min-width: 120px;justify-content:center;-webkit-justify-content:center;}
.address-search-btn{border:none !important;min-width:80px;}
.form-btn img{width:20px}

.order-sheet fieldset form input:focus, .order-sheet fieldset select:focus, .order-sheet fieldset textarea:focus{border:1px solid #005EC9 !important;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);
    --bs-focus-ring-opacity:0.25;--bs-focus-ring-width:0.25rem;}
/*커스텀 radio*/
.radio-group {display: flex;align-items: center;gap: 0.5rem;}
.radio-group div {cursor: pointer;position: relative;padding-left: 30px;}
.radio-group label{cursor: pointer;line-height:20px;}
.radio-group input[type="radio"] {position: absolute;opacity: 0;height: 0;width: 0;}
.radio-group .custom-radio {position: absolute;top: 50%;left: 0;transform: translateY(-50%);height: 20px;width: 20px;border-radius: 50%; background-color: #fff;border: 1px solid #eee;}
.radio-group input[type="radio"]:checked + .custom-radio {border:1px solid #eee; background:#005ec9}
.radio-group .custom-radio::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;border-radius: 50%;background: #eee;}
.radio-group input[type="radio"]:checked + .custom-radio::after {background-color: #fff;}

/*커스텀 check box*/
.checkbox-group input[type="checkbox"] {position: absolute;opacity: 0;height: 0;width: 0;}
.checkbox-group label {cursor: pointer;position: relative;padding-left: 30px;display: flex;align-items: center;cursor: pointer;}
.checkbox-group label::before {content: '';position: absolute;left: 0; top: 50%;transform: translateY(-50%);height: 20px;width: 20px;border-radius: 4px;border: 2px solid #ccc;background-color: #fff;transition: all 0.2s ease-in-out;}
.checkbox-group input[type="checkbox"]:checked + label::before {border-color: #005EC9;background-color: #005EC9;}
.checkbox-group input[type="checkbox"]:checked + label::after {content: '';position: absolute;top:50%;left:-1px;transform: translate(50%, -50%);height: 10px;width: 12px;background: url(../img/check.png) no-repeat;background-size:contain;}
.checkbox-group label:hover::before {border-color: #ededed;}

/*커스텀 스크롤*/
::-webkit-scrollbar {width: 12px; /* 세로 스크롤 너비 */height: 12px; /* 가로 스크롤 높이 */margin-left: 10px;}
::-webkit-scrollbar-track {background: none; /* 트랙 색상 */border-radius: 6px; /* 모서리 둥글게 */}
::-webkit-scrollbar-thumb {background: #ededed; /* 핸들 색상 */border-radius: 5px; /* 핸들 모서리 둥글게 */height: 50%;}
::-webkit-scrollbar-thumb:hover {background: #9A9A9A; /* Hover 시 핸들 색상 */}
.custom-scroll::-webkit-scrollbar {width: 8px}
.custom-scroll::-webkit-scrollbar-track {background: none;}
.custom-scroll::-webkit-scrollbar-thumb {background: #ededed;border-radius: 4px;}



/* ------------------------------------------- tablet or mobile ----------------------------------------------------------*/
@media (max-width: 1181px) {
    /*공통*/
    .mobile{display:inline-block !important}
    .desktop{display:none !important}
    section{position:relative}
    .container{width:90%;position:relative;margin:0 auto;padding:0;}
    .content-head{margin:110px 0 50px;text-align: center;}
    .white{color:#fff;}
    .blue{color:#005EC9;}
    .gray{color:#686868;}
    .error-message{color:red;font-size:0.813rem;font-size:13px;}
    .error-message::before{content: '※';}
    textarea::placeholder , input::placeholder{color:#d1d1d1;font-size:14px;font-size:0.875rem;}
    h3{font-size:20px;font-size:1.25rem;}
    .bold{font-weight: bold;}
    div,span,p ,table, a{font-size:14px !important;font-size:0.875rem !important;}
    .lg{font-size:1.063rem !important;font-size:17px !important;font-weight: bold;}

     /*header*/
      .desktop{display:none;}
      .mobile{display:inline-block;}
      .menu-trigger{display:inline-block;}
      header{width:100%;padding:0 42px;position:fixed;top:0;z-index: 9999;border-bottom:1px solid #d2d2d2}
      header .logo{width: 100px;}
      header .category-wrap.mobile > ul > .category-fir{width:100%;background:#EFEFEF;}
      header .category-wrap.mobile .category-sec{width:100%;}
      header .category-wrap.mobile .category-sec li a{font-size:20px;text-align: left;padding-left:50px;height:80px;display:flex;display:-webkit-flex;align-items:center;-webkit-align-items:center;}
      header .category-wrap.mobile .menu-trigger, .menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
      header .category-wrap.mobile .menu-trigger {position: relative;width: 45px;height: 43px;}  
      header .category-wrap.mobile .menu-trigger span {position: absolute;left: 0;width: 100%;height: 3px;background-color: #333;border-radius: 4px;}
      header .category-wrap.mobile .menu-trigger span:nth-of-type(1) {top: 0;}
      header .category-wrap.mobile .menu-trigger span:nth-of-type(2) {top: 20px;} 
      header .category-wrap.mobile .menu-trigger span:nth-of-type(3) {bottom: 0;}
      header .category-wrap.mobile .menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY (20px) rotate (-45deg);transform: translateY(20px) rotate(-45deg);}
      header .category-wrap.mobile .menu-trigger.active span:nth-of-type(2) {opacity: 0;} 
      header .category-wrap.mobile .menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-20px) rotate(45deg);transform: translateY(-20px) rotate(45deg);}
      header .category-wrap > ul{display: none;}
      header .category-wrap > ul.active{display:inline-block;width:100%;height:100%;position:absolute;top:0;right:0;background:#fff;top:100px;left:0;z-index:99;}
      header .category-wrap .category-sec{position:static;border-top:none;}
      header .category-wrap > ul > .category-fir .category-name{width:100%;border-bottom:1px solid #acacac;text-align:left;font-size:25px;padding-left:50px;position:relative;}
      header .category-wrap > ul > .category-fir .category-name:hover{font-weight: bold;}
      header .category-wrap > ul > .category-fir .category-name:after{content:'';background:url(../img/main/menu-arrow.png)no-repeat;width:25px;height:13px;display:inline-block;position:absolute;right:50px;top:50%;transform: translateY(-50%);
                                                                      background-size:contain;transform:rotate(0deg);transition:0.3s;}
      header .category-wrap > ul > .category-fir.active .category-name:after{transform: rotate(180deg);transition:0.3s;top:40%;}

  }/* ------------------------------------------- tablet or mobile done ----------------------------------------------------------*/
  
  
  /* ------------------------------------------- mobile ----------------------------------------------------------*/
  @media (max-width: 576px) {
    
    /*공통*/

    /*header*/
    /* html{overflow-x: hidden;}
    body{padding: 70px 0 0 0 ;overflow-x: hidden;margin:0} */
    header{padding:0 20px;height:70px;}
    header .logo{width:80px;}
    header .category-wrap.mobile .menu-trigger{width:25px;height:23px;}
    header .category-wrap.mobile .menu-trigger span:nth-of-type(2){top:10px;}
    header .category-wrap.mobile .menu-trigger.active span:nth-of-type(1){top:-10px;}
    header .category-wrap.mobile .menu-trigger.active span:nth-of-type(3){bottom:-10px;}
    header .category-wrap > ul.active{top:70px;}
    header .category-wrap > ul > .category-fir .category-name{font-size:18px;line-height:70px;padding-left:25px;font-size:16px !important;font-size:1rem !important;font-weight: bold;}
    header .category-wrap > ul > .category-fir .category-name:after{right:25px;width:15px;}
    header .category-wrap.mobile .category-sec li a{font-size:17px;height:70px;padding-left:25px;}

    /*footer*/
    footer{padding: 50px 30px;text-align: center;}
    .order-container footer{padding-bottom:100px;}
    footer .company-info{flex-direction:column;}
    footer .company-info img{margin-right:0;margin-bottom:20px;}

    .popup-wrap .popup-inner{width:90%;padding:15px;}
    
   
  }/* ------------------------------------------- mobile done ----------------------------------------------------------*/

  /* ------------------------------------------- mobile - sm size ----------------------------------------------------------*/

  /* galaxy flod / duo */
@media (max-width: 285px) {
     /*공통*/

}  /* ------------------------------------------- mobile - sm size done ----------------------------------------------------------*/
