@charset "utf-8";

/* base */
html,body{font-size: 6.25%; overflow-x: hidden;}
html.safari.desktop {font-size: 0.040083333vw;}
body{font-size:16rem; word-break:keep-all; overflow-y:overlay;}
::selection{background:rgb(255 185 30 / 65%); color:#fff;}
::-webkit-scrollbar{width:10rem; height:7rem;}
::-webkit-scrollbar-thumb{background-color:hsla(0, 0%, 42%, 0.3); border-radius:100rem;}
body{font-size:16rem; overflow-y:overlay; word-break:keep-all;}
body.active{overflow:hidden;}
.wrapper{position:relative; width:1260rem; margin:0 auto;}

/* header */
#header nav{text-align:center;}
#header .head-top {border-bottom: 1rem solid #e8e8e8;}
#header .head-top .inr {height: 110rem; display: flex; align-items: center; justify-content: space-between;}
#header .logo > a{display:inline-block; width:207rem; height:50rem; background:url(../images/common/qmedi-logo.svg) no-repeat 50% 0 / 100% 100%; font-size:0rem; vertical-align:middle;}
#header .inr{position:relative; width: 1520rem; margin:0 auto;}
#header nav .gnb > li{display:inline-block; position:relative;}
#header nav .gnb > li > a{display:inline-block; margin-left:60rem; padding: 17rem 0; font-size:17rem; color:#222; font-weight:600;}
#header nav .gnb > li:first-child > a{margin-left:0rem;}
#header nav .gnb > li > ul{opacity:0;visibility:hidden;position:absolute;top:48rem;left:50%;transform: translateX(-50%);z-index:99;width:100%;min-width:165rem;box-sizing:border-box;padding: 10rem 15rem;background:#fff;border:1rem solid #222;text-align:left;transition:0.3s ease;}
#header nav .gnb > li > ul > li{padding:2rem 0rem;}
#header nav .gnb > li > ul > li > a{display:inline-block; font-size:14rem; color:#444; transition:0.3s ease;}
#header nav .gnb > li > ul > li > a:hover{color:#0b327a;}
#header nav .gnb > li > ul > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}
/* #header nav .gnb > li:last-child {display: none;} */

.head-top__search {position: relative;}
.head-top__search.mob {display: none;}
.head-top__search input {width: 455rem;height: 50rem;border-radius: 100rem;border: 2rem solid #2da4ee;padding: 7rem 30rem;}
.head-top__search input::placeholder {font-size: 16rem; color: #aaa; font-weight: 500; position: relative;}
.head-top__search button {position: absolute; top: 50%; right: 30rem; transform: translateY(-50%); background: url('../images/common/ic-search.svg') no-repeat; width: 23rem; height: 23rem; text-indent: -9999px;}
.head-top__btn {width: 170rem;height: 50rem;border-radius: 100rem;background: #306ce4;color: #fff !important;text-align: center;line-height: 50rem;font-size: 16rem;font-weight: 500;display: flex;justify-content: center;}
.head-top__btn i {position: relative; display: inline-block; padding-left: 16rem;}
.head-top__btn i::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: url('../images/common/ic-arr__ver1.svg') no-repeat; width: 6rem; height: 9rem;}
.head-top__btn.mob {display: none;}
.head-bottom .inr {display: flex;align-items: center;justify-content: flex-start;gap: 60rem;}

.area_util {background: #f6f6f6; z-index: 1002; position: relative;}
.area_util ul{height: 45rem; display: flex; align-items: center; justify-content: right;}
.area_util ul > li{position: relative;}
.area_util ul > li:nth-child(n+2)::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1rem; height: 12rem; background: #dfdfdf;}
.area_util ul > li:nth-child(n+2){padding-left: 10rem; margin-left: 10rem;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{display:inline-block; font-size:13rem; color:#636262; white-space:nowrap;}
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:-10rem; top:-8rem; padding:2rem 6rem; background:#0b327a; border-radius:100%; font-size:10rem; color:#fff;}

#header .area_menu_all .btn_close{opacity: 0;}
#header .btn_menu{font-size:0rem; text-align:center; transition:0.5s ease-in-out; position: relative;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:19rem; height:12rem; margin:0 auto;}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2rem; background:#222; transform:translateX(0rem);}
#header .btn_menu span:before{content:''; width:19rem;}
#header .btn_menu span:after{content:''; width:19rem;}
#header .btn_menu span:before{right:0rem; top:0rem; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0rem; bottom:0rem; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0rem; top:5rem; width:19rem; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .btn_menu em{display:block; overflow:hidden; width:19rem; height:16rem; transition:transform 0.5s ease 0.5s; position: absolute; top: 0; left: 0;}
#header .btn_menu em i{display:block; position:absolute; width:0rem; height:2rem; background:#222; transform:rotate(0);}
#header .btn_menu em i:nth-of-type(1){top:1rem; left:0rem; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
#header .btn_menu em i:nth-of-type(2){bottom:1rem; left:0rem; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-19rem);}
#header .btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
#header .btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
#header .btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
#header .btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
#header .btn_menu.active em i:nth-of-type(1){top:6rem; width:100%; transform:rotate(45deg) perspective(500rem); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:8rem; width:100%; transform:rotate(-45deg) perspective(500rem); transition-delay:0.5s, 1s, 1s;}

#header .area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:205rem; left:0rem; z-index:999; display:block; width:100%; height:300rem; background:#fff; font-size:0rem; transition:0.3s ease;}

#header .fullmenu {opacity: 0; visibility: hidden; position: absolute; left:0; top:59rem; display: flex; width: 100%; padding: 0 30rem; background:#fff; border-top:1rem solid #ddd; box-sizing: border-box; z-index: 9999; transition: .3s;}
#header .fullmenu .menu {display: flex; padding: 25rem 0; flex-wrap: wrap; width: 100%;}
#header .fullmenu .menu > li {margin:25rem 0; width: 20%; text-align: center;}
#header .fullmenu .menu > li > a {position: relative; display: inline-block; color: #000; font-size: 17rem; font-weight: 600; padding-bottom: 3rem; margin-bottom:10px;}
#header .fullmenu .menu > li > a > span {display: none;}
#header .fullmenu .menu > li > ul > li {display: block; margin: 1rem 0;}
#header .fullmenu .menu > li > ul > li > a {color: #666;}
#header .fullmenu .menu > li > ul > li > a span {position: relative; display:inline-block; color:#444; transition:0.3s ease;}
#header .fullmenu .menu > li > ul > li > a span::after {opacity: 0; visibility: hidden; position:absolute; left:0; bottom:0; content:''; width:100%; height:1rem; background: var(--primary); transition:0.3s ease;}
#header .fullmenu .menu > li > ul > li:hover > a span {color:var(--primary);}
#header .fullmenu .menu > li > ul > li:hover > a span::after {opacity: 1; visibility: visible;}
#header .fullmenu .menu > li > ul > p,
#header .fullmenu .menu .category_img {display: none;} 
#header .fullmenu.open {opacity: 1; visibility: visible;}



/* shop */
 *[data-shop-list="default"] > li > a .percent{padding:10rem 15rem !important; margin-top:0rem !important;}
 *[data-shop-list="default"] > li > a > em{font-size:18rem;}

/* footer */
#footer{margin-top:120rem; border-top: 1rem solid #ddd;}
#footer .inr {width:1520rem; margin:0 auto;}
#footer .story > a{display:inline-block; margin-left:25rem; color:#fff; font-size:14rem; font-weight:100;}

#footer .bottom .link-wrap{background: #1d1d1d;}
#footer .bottom .link {padding: 19rem 0;}
#footer .bottom .link > li{display:inline-block; position:relative;}
#footer .bottom .link > li:nth-child(n+2) {padding-left: 28rem;}
#footer .bottom .link > li:nth-of-type(1):before{display:none;}
#footer .bottom .link > li > a{display:inline-block; font-size:16rem; color:#ededed; font-weight:400; transition:0.3s ease;}
#footer .bottom .link > li > a strong{font-weight:400;}
#footer .sns{margin:30rem 0 20rem; text-align:center;}
#footer .sns > li{display:inline-block; margin:0 7rem;}
#footer .sns > li > a{display:inline-block; position:relative; font-size:0rem;}
#footer .sns > li > a:before{content:''; display:block; width:45rem; height:45rem; margin:0 auto; background-repeat:no-repeat; background-position:50% 0; background-size:auto 100%;}
#footer .sns > li [data-sns="face"]:before{background-image:url(../images/common/img_face.png);}
#footer .sns > li [data-sns="instar"]:before{background-image:url(../images/common/img_instar.png);}
#footer .sns > li [data-sns="blog"]:before{background-image:url(../images/common/img_blog.png);}
#footer .sns > li [data-sns="kakao"]:before{background-image:url(../images/common/img_kakao.png);}
#footer .copy{color:#7e7d7d; padding: 48rem 0;}
#footer .copy span{display:inline-block; margin:0 9rem; font-size:16rem; font-weight:400;}
#footer .copy span:nth-child(n+5) {margin-top: 5rem;}
#footer .copy span a{display:inline-block; color:#7e7d7d;}

.area_info{padding: 60rem 0; display: flex;}
.area_info h2 {font-size: 20rem; color: #111;}
.area_info:after{content:''; display:block; clear:both;}
.area_info .customer{width:430rem;}
.area_info .customer a{display:block;font-size:45rem;font-weight:600;line-height:1.3em;color: #365ec3;font-family: 'GmarketSans';margin-top: 10rem;}
.area_info .customer ul {margin-top: 15rem; font-size: 16rem;}
.area_info .customer ul li i,
.area_info .customer ul li span{display:inline-block; vertical-align:middle; color: #666;}
.area_info .customer ul li i{padding-right: 5rem; font-weight: bold;}
.area_info .bank{width: 365rem;}
.area_info .bank em{display:block; font-size:35rem; font-weight:600; line-height:1.3em; color:#111;}
.area_info .bank ul{margin-top:10rem;}
.area_info .bank ul li {font-size: 16rem;}
.area_info .bank ul li i,
.area_info .bank ul li span{display:inline-block; color: #666;}
.area_info .bank ul li i {font-weight: 600; padding-right: 4rem;}
.area_info .bank ul li:nth-child(n+2) {margin-top: 4rem;}
.area_link {display: flex;}
.area_link li {border-radius: 10rem; width: 353rem; position: relative;}
.area_link li::before {content: ''; position: absolute; top: 50%; right: 22rem; transform: translateY(-50%);}
.area_link li:nth-child(1)::before {background: url('../images/common/ic-arr__ver3.svg') no-repeat; width: 34rem; height: 34rem;}
.area_link li:nth-child(2)::before {background: url('../images/common/ic-arr__ver3-w.svg') no-repeat; width: 34rem; height: 34rem; opacity: .3;}
.area_link li:nth-child(1) {background: #f4f4f4;}
.area_link li:nth-child(2) {background: #365ec3;margin: 0 0 0 20rem;}
.area_link li:nth-child(2) strong,
.area_link li:nth-child(2) p {color: #fff;}
.area_link li strong {font-size: 20rem; color: #111; font-weight: 700;}
.area_link li p {padding-top: 7rem; font-size: 16rem; color: #666;}
.area_link li a {height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 22rem;}

.lnb{max-width:1200rem; margin:0 auto 50rem; display: block !important;}
.lnb > ul{text-align:center;}
.lnb > ul > li{display:inline-block; margin:0 5rem;}
.lnb > ul > li > a{display:inline-block; display:flex; flex-direction:column; justify-content:center; min-width:140rem; height:50rem; box-sizing:border-box; border:1rem solid #e7e7e7; font-size:14rem; text-align:center;}
.lnb > ul > li > a.on{border-color:#222; color:#222;}

.quick-right {width: 130rem; border-radius: 7rem 0 0 7rem; position: fixed; right: 0; top: 20%; overflow: hidden; border: 1rem solid #ebebeb; background: #fff; z-index: 999; display: none;}
.quick-right ul li a {display: block; height: 100%; cursor: pointer;}
.quick-right__kakao {background: #fae100; width: 100%;}
.quick-right__kakao a {font-size: 14rem; color: #371d1e; text-align: center; font-weight: 600; padding: 20rem 0;}
.quick-right__kakao i {display: table; margin: 0 auto; padding-bottom: 6rem;}
.quick-right__kakao i img {height: 28rem;}
.quick-right__btn a {position: relative; font-size: 13rem; font-weight: 600; color: #333; padding: 12rem 8rem;}
.quick-right__btn a::before {content: ''; position: absolute; top: 50%; right: 8rem; transform: translateY(-50%); background: url('../images/common/ic-arr__ver4.svg') no-repeat; width: 6rem; height: 9rem; cursor: pointer;}
.quick-right__btn.bt02 {border-top: 1rem solid #ebebeb;}
.quick-right__view p {width: 100%; color: #fff; background: #333; font-size: 14rem; padding: 6rem 0; text-align: center; font-weight: 600;}
.quick-right__view-img {padding: 16rem 14rem; background: #f8f8f8;}
.quick-right__view-img .swiper-slide {width: 108rem; height: 89rem !important; margin: 0 auto; display: block;}
/* .quick-right__view-img .swiper-slide:nth-child(2) {margin-top: 7rem;} */
.quick-right__view-img img {width: 100%; height: 100%;}
.quick-right__top {border-top: 1rem solid #ebebeb; text-align: center;}
.quick-right__top a {font-size: 12rem; color: #333; font-weight: 600; padding: 8rem;}

.quick-right__email {background: #4286f3;width: 100%;}
.quick-right__email a {font-size: 14rem;color: #ffffff;text-align: center;font-weight: 600;padding: 20rem 0;}
.quick-right__email i {display: table;margin: 0 auto;background: #6b9aed;aspect-ratio: 1/1;padding: 10rem;border-radius: 50%;margin-bottom: 10rem;}
.quick-right__email i img {height: 28rem;}

.quick-left {position: fixed; top: 50%; transform: translateY(-50%); overflow: hidden; z-index: 999; display: none; width: 130rem;}
.quick-left img {width: 100%;}

/* aside */
.aside__swiper{max-height: 185rem; }
.aside__control{ margin-top: 15rem; display: flex; align-items: center; justify-content: center; gap: 10rem; font-size: 12rem; font-weight: 300; color: #aaa; }
.aside__pager{ width: auto !important;}
.aside__pager .swiper-pagination-current{ font-weight: 600; color: #333; }
.aside__btn{ position: relative; width: 5rem; height: 5rem; background: no-repeat 50% / 5rem; }
.aside__btn::before{ content: ''; position: absolute; inset: -10rem; }
.aside__btn.prev{ background-image: url('/images/common/aside_prev.png'); }
.aside__btn.next{ background-image: url('/images/common/aside_next.png'); }



/* 엑셀로 주문하기 */
.excel_oreder_wrap {width:600rem; min-height:300rem; padding:46rem 40rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:1003; background:#fff; border:1px solid #d9d9d9; visibility: hidden; border-radius:8rem; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; opacity: 0; transition: all 0.25s ease-in-out; } 
.excel_oreder_wrap.open { opacity: 1; visibility: visible; } 
.excel_oreder_wrap .tit{display:inline-block; padding-bottom:35rem; padding-right:10rem; font-weight:600; font-size:18rem;}
.excel_oreder_wrap .btn_close{position:absolute; top:-10rem; right:0; display:block; width:24rem; height:24rem; background:url('../images/common/icon_modal_close.svg') no-repeat; background-size:cover; cursor:pointer;}
.excel_oreder_header{position:relative;}
.excel_oreder_header .btn_sample_down{display:inline-block; padding: 2rem 12rem; line-height: 20rem;  font-size: 14rem; border: 1px solid #bababa; color: #696969; border-radius: 3rem; cursor: pointer;}
.excel_oreder_footer{padding-top:35rem; text-align:center;}
.excel_oreder_footer .btn_submit{display:inline-block; padding:12rem 30rem; color:#fff; background-color:#6caf19; border-radius:3rem; cursor:pointer; transition:all 0.2s ease 0s;}
.excel_oreder_footer .btn_submit:hover{background-color:#7dd414;}
.bbsForm .designFile{display:flex; align-items:center;}
.bbsForm .designFile + .designFile{margin-top:6px;}
.bbsForm .designFile label{margin-bottom:0;margin-left: 5px;font-weight:400;font-size:14px; border-radius:3rem;} 
.bbsForm input[type="text"]{height:52px; margin:0; padding:0 15px; transition:all 0.3s ease 0s; outline:none;}
.button_new{height:52px;line-height:52px;padding:0 0px;border: 1px solid #393939;font-size:14px;text-align:center;transition:all 0.2s ease 0s;min-width:100px;cursor:pointer;background: #fff;}
.button_new:hover{ border-color:#222;background: #555555;color: #fff;}
.button_new.black{background: #6e6e6e; border: 1px solid #5e5e5e; color:#fff;}
.button_new.black:hover{background: #363636;}
.button_new:hover, .button_new:hover span {color: #fff;}

@media (min-width:2000px){
	html,
	html.safari.desktop{font-size:0.05254860746190225vw;}
}
@media screen and (max-width:1580px) {
	html,
	html.safari.desktop{font-size:0.06756756756756757vw;}
	#header .inr {width:auto; padding:0 30rem}
    #header nav .gnb > li > a {margin-left: 45rem;}
    #footer .inr{width:auto; margin:0 30rem;}
    .area_info .customer a {font-size: 35rem;}

    .quick-right {width: 120rem;}
    .quick-left {width: 100rem;}
}
@media screen and (max-width:1024px){
	html,
	html.safari.desktop{font-size:0.09775171065493645vw;}

    #header {position: relative;}
    #header.on  {position: fixed; top: 0; width: 100%; z-index: 999; background: #fff; box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px; height: 165rem;}
	#header .logo{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    #header .logo > a {width: 155rem; height: 37rem;}
	#header .fullmenu {display: none;}
    #header .head-top {border-bottom: 0;}
    #header .head-top .inr {height: 80rem; justify-content: start;}
    .head-top__btn {font-size: 14rem; height: 40rem; width: 150rem; line-height: 40rem;}
    .head-top__search.pc {display: none;}
    .head-top__search.mob {display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 80rem; width: 94%;}
    .head-top__search.mob input {width: 100%;}

    #header .btn_all_menu{display:none;}
    #header .gnb_wrap{border-top:0;}
    #header .gnb_wrap .inr{position:static; width:100% !important;}
	#header .btn_menu{display:block; position: absolute; top: -47rem; right: 30rem; z-index: 1000;}
    #header .btn_menu.active em i{background: #fff;}
	
    #header nav {width:50%; height:100%; background:#fff; overflow-y:auto; position:fixed; top:0; left: -50%; z-index:100; transition:ease 0.7s;}
    #header nav.active {left: 0;}
	#header .area_menu_all{display:block; visibility:hidden;}	
	/* #header .area_menu_all > ul > li:not(.gnb_cate){display:block;} */
	#header .area_menu_all > ul li{position:relative;}
	#header .area_menu_all > ul > li{display:block; padding:0rem; border-bottom:1rem solid #e9e9e9;}
	#header .area_menu_all > ul > li > a{float:none; display:block; width:auto; padding:10rem 40rem 10rem 15rem; margin-left:0rem; font-size:18rem; text-align:left;}
	#header .area_menu_all > ul > li > ul{float:none;opacity:1;visibility:visible;position: relative;width:auto;margin:0 15rem 15rem;padding:0;background:#f5f5f5;border-width:0rem;transition:none;top: 0;left: 0;transform: none;padding: 7rem 7rem;}
	#header .area_menu_all > ul > li > ul > li{display:block; margin:0rem;}
	#header .area_menu_all > ul > li > ul > li:hover > a,
	#header .area_menu_all > ul > li > ul > li:focus > a{color:#444;}
	#header .area_menu_all > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul > li > ul > li.active > a,
	#header .area_menu_all > ul > li > ul > li.active:hover > a,
	#header .area_menu_all > ul > li > ul > li.active:focus > a{color:#f2483b;}
	#header .area_menu_all > ul > li > ul > li > a{display:block;width:auto;padding: 3rem 40rem 3rem 10rem;}
	#header .area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0rem;}
	#header .area_menu_all > ul > li > ul > li:last-child > ul{border-top:1rem solid #d8d8d8; border-bottom-width:0rem;}
	#header .area_menu_all > ul > li > ul > li > ul{padding:10rem 15rem; background:#eaeaea; border-bottom:1rem solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all > ul > li > ul > li > ul > li > a{padding:2rem 0rem; color:#333;}
	#header .area_menu_all .open{display:block;position:absolute;right: 10rem;top:5rem;width:35rem;height:35rem;background:transparent;font-size:0rem;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12rem; height:2rem; margin-top:-6rem; background:#cfcece;}
	#header .area_menu_all .open:before{margin-left:-8rem; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-5rem;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}
	#header .area_menu_all .btn_close {background: none;}
	#header .area_menu_all.active,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
    #header .area_menu_all.active {margin-top: 47rem;}
	
    .area_util {position: absolute; width: 50%; left: -50%; top: 0; transition:ease 0.7s;}
    .close_wrap {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 99;}

    body.active .area_util {left: 0;}
    body.active .close_wrap {display: block;}

    .area_info {flex-wrap: wrap;}
    .area_info .customer,
    .area_info .bank {width: 50%; text-align: center;}
    .area_link {width: 100%; margin-top: 40rem;}
    .area_link li {width: 100%; height: 150rem;}

	.lnb{margin:0 auto 30px;}

    .quick-right, .quick-left {display: none !important;}
}
@media all and (max-width:860px){
    html,
	html.safari.desktop{font-size:0.13020833333333335vw;}

    #footer .inr{width:auto; margin:0 20rem;}
    #header .inr {padding: 0 20rem;}
}


@media screen and (max-width:768px) {
    /* 엑셀로 주문하기 */
    .excel_oreder_wrap {width:90%; min-height:auto; padding:40rem 30rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .excel_oreder_wrap .tit{padding-bottom:45rem; padding-right:5rem;}
    .excel_oreder_header .btn_sample_down{font-size:13rem; border-radius:2rem;}
    .designFile.mob input[type="file"]{height: auto;; line-height: 14rem; padding:15rem 0 15rem 15rem; font-size:14rem; border-radius:2rem;}
    .excel_oreder_footer .btn_submit{display:block;}
 }
 
@media screen and (max-width:750px){
	*[data-shop-list="default"] > li > a .percent{height:59rem !important;}

}
@media all and (max-width:540px){
    html,
	html.safari.desktop{font-size:0.26666666666666665vw;}	

    #header .area_menu_all > ul > li > a {font-size: 16rem;}
    #header .logo {left: 20rem; transform: translateY(-50%);}
    #header .logo > a {width: 120rem; height: 29rem;}
    #header .btn_menu {right: 20rem; top: -33rem;}
    #header .head-top .inr {height: 55rem;}
    #header nav {width: 84%; left: -84%;}
    #header.on {height: 130rem;}
    .area_util {width: 84%; left: -84%;}
    .area_util ul > li > a span {font-size: 12rem;}

    #footer {margin-top: 70rem;}
    #footer .inr br {display: none;}
    #footer .bottom .link {display: flex;}
    #footer .bottom .link > li > a {font-size: 14rem;}
    #footer .bottom .link > li:nth-child(n+2) {padding-left: 18rem;}
    #footer .copy {padding: 35rem 0;}
    #footer .copy span {font-size: 14rem; display: block;}
    #footer .copy span:nth-child(n+2) {margin-top: 3rem;} 

    .area_info {padding: 35rem 0;}
    .area_info h2 {font-size: 18rem;}
    .area_info .customer, .area_info .bank {width: 100%;}
    .area_info .customer a {font-size: 26rem; margin-top: 6rem;}
    .area_info .customer ul {margin-top: 10rem; font-size: 14rem;}
    .area_info .bank {margin-top: 30rem;}
    .area_info .bank ul li {font-size: 14rem;}
    .area_link {flex-direction: column;}
    .area_link li {height: 110rem;}
    .area_link li:nth-child(2) {margin: 12rem 0 0;}
    .area_link li strong {font-size: 18rem;}
    .area_link li p {font-size: 14rem; padding-top: 4rem;}

    .head-top__btn{display: none;}
    .head-top__btn i {padding-left: 11rem;}
    .head-top__btn i::before {top: -9rem; transform: none;}
    body.active .head-top__btn.mob {display: block; position: absolute; bottom: 0; width: 100%; border-radius: 0;}

    .head-top__search.mob {top: 58rem;}
    .head-top__search input {padding: 7rem 22rem;}

    .lnb > ul > li > a {min-width: 85rem; height: 45rem;}

    
    
}
@media screen and (max-width:480px){
	.area_util ul > li{margin:0 10px;}
	*[data-shop-list="default"] > li > a .percent{height:55px !important; padding:10px 13px !important;}
	
	#footer .bottom .link > li > a{font-size:13px;}
	#footer .sns > li{margin:0 3px;}
	#footer .sns > li > a:before{width:35px; height:35px;}
	#footer .copy span{font-size:12px;}

	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}

@media screen and (max-width:320px){
	.area_util ul > li{margin:0 8px;}
	*[data-shop-list="default"] > li > a .percent{height:50px !important; padding:7px 10px !important;}
}

@media screen and (max-width:300px){
	#header .btn_menu{overflow:hidden; width:40px;}
	.area_util{right:45px;}
	.area_util ul > li{margin:0 4px;}
}