@charset "utf-8";

/* container */
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;position:relative;}
@media (min-width:768px){
    .container{width:750px;}
}
@media (min-width:992px){
    .container{width:970px;}
}
@media (min-width:1200px){
    .container{width:1170px;}
}
@media (min-width:1460px){
    .container{width:1430px;}
}
@media (min-width:1560px){
    .container{width:1530px;}
}
.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;width:100%;}


/* header */
.header-wr {border-bottom:1px solid #f1f1f3;position:relative;}
.head-banner-wr {background:#086c3b;display:none;}
.head-banner {position:relative;height:65px;display:flex;justify-content:center;align-items:center;}
.head-banner p {color:#fff;font-size:18px;}
.head-banner p strong {font-weight:600;color:#ffb300;}
.head-banner span {position:absolute;top:50%;transform:translateY(-50%);right:0;display:flex;align-items:center;color:rgba(255,255,255,0.75);font-weight:200;}
.head-banner button {width:20px;height:20px;margin-left:5px;border:0;background:url("/img/main/close_btn.svg") no-repeat center transparent;background-size:cover;text-indent:-9999px;font-size:0;}
.header {display:flex;justify-content:space-between;align-items:center;height:65px;}
.header .head-menu {}
.head-menu {display:flex;flex-direction:column;align-items:flex-end;}
.head-menu ul {}
.head-login {}
.head-login ul {display:flex;align-items:center;justify-content:flex-end;height:35px;gap:20px}
.head-login li {font-size:14px;font-weight:500;}
.head-login li a {display:flex;align-items:center;}
.head-login li a img {margin-left:3px;}
.head-ico-btn {position:relative;display:flex;align-items:center;gap:15px}
.head-ico-btn a {position:relative;display:block;}
.head-ico-btn a span.count {position:absolute;top:-2px;right:0;background:#086c3b;color:#fff;display:flex;width:14px;height:14px;justify-content:center;align-items:center;border-radius:2px;}
.head-ico-btn a img {width:24px;}
.head-ico-btn button {border:0;background:none;}
.head-ico-btn button.search-btn {}
.head-ico-btn button.search-btn img {width:22px;}
.head-ico-btn li.menu-btn-li {display:none;}
.head-ico-btn button.menu-btn {}
.head-ico-btn button.menu-btn img {width:32px;}

.head-search {position:absolute;height:80px;top:100%;left:0;right:0;z-index:100;background-color:#eee;display:none;}
.head-search fieldset {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.head-search fieldset input {display:block;width:320px;height:45px;border:0;padding:0 15px;border-radius:30px;font-size:14px;}
.head-search fieldset button {position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:0;font-size:20px;color:#333;}

/* footer */
.footer-wr {background:#e6e6e6;}
.footer {padding-bottom:45px;}
.footer-head {height:110px;display:flex;align-items:center;}
.footer-head .logo {}
.footer-head .logo img {filter:brightness(0) opacity(0.3);}
.footer-body {display:flex;align-items:flex-start;justify-content:space-between;}
.footer-body .left {}
.footer-body .right {}
.footer-menu {display:flex;gap:15px;margin-bottom:30px;}
.footer-menu li {}
.footer-menu li a {font-size:16px;}
.footer-menu li a strong {font-weight:600;}
.footer-body h3 {font-size:16px;margin-bottom:10px;}
.footer-body .info {}
.footer-body .info p {display:flex;gap:20px;line-height:1.75em;font-size:14px;}
.footer-body .info p.copy {margin-top:15px;color:#999;font-weight:300;}
.footer-body .cs {display:flex;flex-direction:column;align-items:flex-end;}
.footer-body .cs h3 {font-size:30px;margin-bottom:15px;color:#086c3b;font-weight:700;}
.footer-body .cs p {font-size:16px;margin-bottom:5px;}
.quick-banner {position:absolute;width:135px;top:30px;right:30px;z-index:99;padding:15px 0;background:#755431;border-radius:15px;display:none;}
.quick-banner h5 {font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.quick-banner h5 span {background:#fff;color:#755431;padding:2px 5px;border-radius:2px;}
.notice-slide {padding:0 15px;}

/* main */
.wrapper {background:#f8f8f8;position:relative;z-index:5;padding:30px 0 0;}
.wrapper-inner {padding-bottom:120px;}
.main-item {}
.main-item-wr {position:relative;display:flex;gap:30px}
.main-item-list {width:75%;}
.order-page {width:25%;}
.main-item-head {display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;}
.main-item-head .exchange-rate {display:flex;align-items:center;font-size:14px;}
.main-item-head .exchange-rate p {display:flex;background:#ebebeb;border-radius:15px;overflow:hidden;}
.main-item-head .exchange-rate p span {padding:5px 10px;}
.main-item-head .exchange-rate p span.tit {background:#e1e1e1;border-right:1px solid #d9d9d9;font-weight:500;}

.cate-tab-wrapper {width:fit-content;overflow:hidden;}
ul.cate-tab {position:relative;display:flex;--slider-left:0px;--slider-width:0px;--slider-height:100%;background:#086c3b;border-radius:10px;}
ul.cate-tab:after {content:"";position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:0 15px 15px -15px rgba(0, 0, 0, 0.15);z-index:-1}
ul.cate-tab::before {content:"";position:absolute;background-color:#454545;border-radius:10px;left:var(--slider-left);width:var(--slider-width);height:var(--slider-height);top:0;transition:left 0.3s ease, width 0.3s ease, height 0.3s ease;box-shadow:0 15px 15px -15px rgba(0, 0, 0, 0.75);z-index:0;}
ul.cate-tab li {position:relative;z-index:1;font-size:16px;font-weight:400;}
ul.cate-tab li.on {font-weight:500;}
ul.cate-tab li span {position:relative;cursor:pointer;height:45px;display:flex;justify-content:center;align-items:center;padding:0 20px;color:#fff;white-space:nowrap;z-index:2;}
ul.cate-tab li.on span {color:#fff;transition:all 0.3s ease;}

.api-wrap {display:flex;gap:15px;padding:10px 15px;background:linear-gradient(45deg, #232323, #126559, #173977);border-radius:10px;}
.api-wrap .api-inner {display:flex;font-size:14px;gap:10px;}
.api-wrap .api-inner h2 {color:rgba(255, 255, 255, 0.5);display:flex;align-items:center;font-weight:500;gap:5px;}
.api-wrap .api-inner p {color:#fff;display:flex;align-items:center;}

.order-list .order-list-head {}
.order-list-head {background:#fff;border-radius:10px;box-shadow:0 10px 15px -15px rgba(0, 0, 0, 0.30);margin-bottom:10px;}
.order-list-head ul {display:flex;padding:0 15px;}
.order-list-head ul li {font-size:13px;height:50px;display:flex;justify-content:center;align-items:center;font-weight:600;}
.order-list-head ul li:nth-child(1) {width:20%;}
.order-list-head ul li:nth-child(2) {width:40%;}
.order-list-head ul li:nth-child(3) {width:15%;}
.order-list-head ul li:nth-child(4) {width:10%;}
.order-list-head ul li:nth-child(5) {width:15%;}
.order-list-head ul li span {}

/* board */
.board-wrap {}
.sub-head-menu {width:fit-content;margin-bottom:30px;}
.sub-head-menu ul {position:relative;display:flex;}
.sub-head-menu ul:after {content:"";position:absolute;top:0;bottom:0;left:0;right:0;background:#fff;border-radius:10px;box-shadow:0 15px 15px -15px rgba(0, 0, 0, 0.15);z-index:-1;}
.sub-head-menu ul li {position:relative;z-index:1;font-size:16px;font-weight:400;}
.sub-head-menu ul li.on {font-weight:500;}
.sub-head-menu ul li.on:before {content:"";position:absolute;background-color:#454545;border-radius:10px;left:0;right:0;top:0;bottom:0;box-shadow:0 15px 15px -15px rgba(0, 0, 0, 0.75);z-index:2;}
.sub-head-menu ul li a {position:relative;height:45px;display:flex;justify-content:center;align-items:center;padding:0 20px;color:#333;z-index:2;}
.sub-head-menu ul li.on a {color:#fff;}

/* search */
.search-item-wr {display:flex;gap:30px;padding-bottom:75px;}
.search-item {width:75%;}
#ssch_cate {padding:15px 0;}
#ssch_cate ul {display:flex;gap:15px;}

/* media query */
@media(max-width:1759px){
    .wrapper {padding: 30px 0 0;}
    .quick-banner {position:relative;width:100%;top:auto !important;right:auto;border-radius:0;padding:30px;}
    .quick-banner h5 {}
    .quick-inner {}
    .notice-slide {max-width:330px;margin:auto;}
}

@media(max-width:1459px){
    .main-item-list {width:70%;}
    .order-page {width:30%;}
    .order-list-head {display:none;}
}

@media(max-width:1199px){
    .main-item-list {width:65%;}
    .order-page {width:35%;}
    
    .sod_wrap .sod_left {width:70%;}
    .sod_wrap .sod_right {width:30%;}
}

@media(max-width:991px){
    /* header */
    .head-banner {height:auto;padding:20px 0 15px;}
    .head-banner p {font-size:14px;word-break:keep-all}
    .head-banner p img {width:35px;}
    .head-banner span {top:auto;transform:none;bottom:5px;font-size:11px;}
    
    .header {height:55px;}
    .header .logo a img {width:160px;}
    
    /* footer */
    .footer {padding-bottom:60px;}
    .footer-head {height:80px;}
    .footer-head .logo img {width:160px;}
    .footer-menu {gap:15px;flex-wrap:wrap;}
    .footer-menu li a {font-size:14px;}
    .footer-body {flex-direction:column;align-items:flex-end;}
    .footer-body .info p {gap:0 15px;flex-wrap:wrap;word-break:keep-all;}
    .footer-body .info p.copy {font-size:12px;}
    .footer-body .left {width:100%;}
    .footer-body .right {width:100%;padding-top:15px;}
    .footer-body .cs h3 {font-size:24px;}
    .footer-body .cs p {font-size:14px;}
    
    /* main */
    .wrapper {padding:15px 0 0;}
    .wrapper-inner {padding-bottom:60px;}
    #wrapper_title {font-size:1.6em !important;}
    #main_bn .btn_wr {bottom:auto;padding:0;top:calc(100% + 3px);right:0;}
    
    /* order */
    .main-item-wr {flex-direction:column;}
    .main-item-list {width:100%;}
    .search-item-wr {flex-direction:column;}
    .search-item {width:100%;}
    .order-page {width:100%;}
    .main-item-head {flex-direction:column;align-items:normal;gap:5px;}
    .main-item-head .api-wrap {gap:15px;height:auto;}
    .cate-tab-wrapper {width:auto;}
    ul.cate-tab {overflow-x:auto;}
    ul.cate-tab::before {box-shadow:0 10px 10px -10px rgba(0, 0, 0, 0.55);}
    ul.cate-tab li {font-size:14px;}
    ul.cate-tab li span {padding:0 15px;}
    
    .sod_wrap {gap:15px;}
    .sod_wrap .sod_left {width:60%;}
    .sod_wrap .sod_right {width:40%;}
    .orderer-inner ul li span.tit {}
    #sod_frm_taker .order_choice_place {gap:10px;}
    #sod_frm_taker .order_choice_place a#order_address {position:relative;top:auto;right:auto;transform:none}
    
    /* customer */
    .sub-head-menu {width:100%;}
    .sub-head-menu ul li.on:before {box-shadow:0 10px 10px -10px rgba(0, 0, 0, 0.55);}
    .sub-head-menu ul li {font-size:14px;}
    .sub-head-menu ul li a {padding:0 10px;}
}

@media(max-width:767px){
    .wrapper {background:#f1f1f1;}
    .head-ico-btn li.menu-btn-li {display:block;}
    .head-login {display:none;position:absolute;background:#fff;left:0;right:0;top:100%;padding:15px;border-top:1px solid #eee;;z-index:100;}
    .head-login ul {height:auto;justify-content:center;align-items:center;gap:15px;}
    .head-login li {font-size:13px;font-weight:700;}
    .head-login li.external-link {display:none;}
    .head-search {height:70px;}
    .head-search fieldset input {height:40px;}
    
    .sod_wrap {flex-direction:column;}
    .sod_wrap .sod_left {width:100%;}
    .sod_wrap .sod_right {width:100%;}
    .orderer-inner ul li {flex-direction:column;}
    .orderer-inner ul li span.desc {width:100%;flex:none;}
    .orderer-inner ul li span.desc input[type="text"] {width:100% !important;}
    .orderer-inner ul li span input#od_zip {width:90px;}
    .orderer-inner ul li span.tit {width:100%;margin-bottom:5px;}
    .orderer-inner ul li span.frm_addr {width:100%;}
    .main-item-head .api-wrap {flex-direction:column;gap:10px;}
    .api-wrap .api-inner {justify-content:space-between;font-size:13px;}
    .api-wrap .api-inner p {font-weight:500;}
    
    .quick-banner {padding:15px 0;}
    
    .reg_result .inner dl dt {height:60px;}
    .reg_result .inner dl dt p {font-size:14px;}
    .reg_result .inner dl dd ul {gap:20px;padding:15px;}
    .reg_result .inner dl dd ul li {width:75px;height:75px;}
    .reg_result .inner dl dd ul li:before {right:-20px;width:20px;background-size:10px;}
    .reg_result .inner dl dd ul li.on {background-size:25px;}
    .reg_result .inner dl dd ul li span {padding-top:50px;font-size:12px;}
    .reg_result .inner p.note {padding:0 15px;font-size:12px;}
    .reg_btn_submit {font-size:14px;}
    
    #smb_my_ov .op_area {flex-direction:column;background:#fff;}
    #smb_my_ov .op_area dt {width:100%;margin:0;}
    #smb_my_ov .op_area dd {width:100%;margin:0 0 10px;}
    
    .cart_tit {flex-direction:column;}
    .cart_item ul.cart_ul {flex-direction:column;}
    .cart_item ul.cart_ul li {width:100%;}
    .cart_bottom_btn button {flex:1;}
    #sod_bsk #sod_bsk_tot li {padding:15px;}
    #mod_option_frm h2 {padding:0 15px;}
    .mod_option_inner {padding:15px;}
    #sit_opt_added li {width:calc(50% - 5px);padding:10px;}
    #sit_opt_added li .opt_count {}
    #sit_opt_added .num_input {}
    .order_item ul.order_ul {flex-direction:column;}
    .order_item ul.order_ul li {width:100%;}
    
    .smb_my_box ul {flex-direction:column;}
    .smb_my_box ul li {width:100%;}
}