@charset "UTF-8";

/* @import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap'); */
/* 
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;700;900&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,700,500,600&display=swap'); */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet');

:root{
	--theme-color: #28282a;
	--key-color: #eceae5;
	--second-color: #187ef2;
	--ad-color-06: #0617cc;
	--ad-color-07: #0764fa;
	--ad-color-ffa: #ffa31a;
	--ad-color-4d: #4dffd8;
	--ad-color-94: #940afd;
	--text-body-color: #0a0a0a;

	--bg-color-f5: #f5f5f5;
	--bg-color-f9: #f9f9f9;
	--bg-color-f0: #f0f0f9;
	--bg-color-ed: #edf3fa;
	--bg-color-a4: #a4a4a4;
	--bg-color-d1: #d1d1d1;
	--bg-color-e2: #e2e2e2;
	--bg-color-e3: #e3e3e3;
	--bg-color-3f: #3f3f40;
	--bg-color-cb: #cbcbcb;
	--bg-color-28: #28282a;

    --swiper-theme-color: #3a95de !important;

	--seek-bar-thumb-color: #fff;
	--seek-bar-progress-background: #fff;
	--seek-bar-background: rgba(255, 255, 255, 0.4);

	/* --container-width: 1216px; */
	--container-width: 1236px;
	--cfg-item-1280 : 220px;
	--cfg-item-767 : 180px;

	--header-height: 4.584vw;
	--font-16: 0.833334vw;
	--font-18: 0.9375vw;
	--font-20: 1.041665vw;
	--font-24: 1.25vw;
	--font-28: 1.458334vw;
	--font-36: 1.875vw;
	--font-40: 2.083334vw;
	--font-42: 2.1875vw;
	--font-64: 3.125vw;
	--vw-30: 1.5625vw;
	--vw-40: 2.083334vw;
	--vw-50: 2.6042vw;
	--vw-60: 3.125vw;
	--vw-70: 3.646vw;
	--vw-80: 4.166667vw;
	--vw-90: 4.6875vw;
	--vw-100: 5.20835vw;
	--vw-110: 5.7292vw;
	--vw-120: 6.25vw;
	--vw-180: 7.05vw;
	--vw-200: 10.41667vw;
	--vw-270: 14.063vw;
	--vw-380: 19.792vw;
	--vw-480: 25vw;
	--vw-600: 31.2501vw;
	--vw-680: 35.417vw;
}

/**********
* ## reset
**********/
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html{overflow-x: hidden; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent !important;-webkit-text-size-adjust: none;-webkit-appearance: none; /* -webkit-user-select:none; */}/* 모바일 드래그 막기 */
html {width: 100%; height: 100%; overflow-x: hidden; font-size: 10px;}
body {min-width: 320px; max-width: 100%; color: #0d0d0d; word-break: keep-all; word-wrap: break-word; font-weight: 400; font-size: 1.6rem; font-family: 'Pretendard', 'Manrope', sans-serif; line-height: 1.5;}



h1, h2, h3, h4, h5, h6 {font-size: 16px; line-height: 100%; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p {margin: 0px; padding: 0px; -webkit-text-size-adjust: none;}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
table {width: 100%; border-collapse: collapse; border-spacing: 0px; /*table-layout: fixed;*/}
fieldset, img, abbr, acronym {border: 0px;}
img {vertical-align: top;}
legend {position: absolute; height: 0; line-height: 0; font-size: 0; overflow: hidden;}
ins {font-style: normal;}
del {text-decoration: none;}
address, caption, cite, code, dfn, em, var {font-style: normal; font-weight: normal;}
ol, ul {list-style: none;}
caption {height: 0; line-height: 0; font-size: 0; overflow: hidden; text-indent: -10000px;}
a {color: inherit; text-decoration: none; cursor: pointer;}
/*a:active, a:hover {color:#888; text-decoration:none}*/
a > * {color: inherit;}
a:hover, a:focus, a:visited{text-decoration: none;}
hr{display: none;}
button {padding: 0; border: 0 none; background: none; font-family: 'Pretendard', sans-serif;}
button:focus, button:active{outline: 0;}
button > span {color: inherit;}
.hidden {display: none;}
header, footer, article, section, aside, details, figure, figcaption, nav {display: block; margin: 0; padding: 0;}
small {font-size: 11px; padding-left: 10px;}
audio[controls], canvas, video {display: inline-block;}
button, input, select, textarea {margin: 0; font-size: 100%; vertical-align: middle;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;}
input[type="search"] {-webkit-appearance: none;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
textarea {overflow: auto; vertical-align: top; resize: none;}
textarea:focus{outline: none;}
select{-webkit-appearance: none; -moz-appearance:none; appearance:none; }
select::-ms-expand {display: none;}
label input[type="checkbox"], label input[type="radio"] {vertical-align: baseline;}
input[type="text"], input[type="email"], input[type="file"], input[type="password"], input[type="number"], input[type="search"], textarea {width: 100%; box-sizing: border-box; -webkit-appearance: none; border-radius: 0;}
input:focus{outline: none;}

/* input[placeholder]{color: #969696; opacity: 1;} */
input::-webkit-input-placeholder {color: #a0a0a0;}
input:-moz-input-placeholder {color: #a0a0a0;}
input::-moz-input-placeholder {color: #a0a0a0;}
input:-ms-input-placeholder {color: #a0a0a0;}

/* WebKit browsers */
::-webkit-input-placeholder {color: #a0a0a0; opacity: 1;}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {color: #a0a0a0; opacity: 1;}
/* Mozilla Firefox 19+ */
::-moz-placeholder {color: #a0a0a0; opacity: 1;}
/* Internet Explorer 10+ */
:-ms-input-placeholder {color: #a0a0a0; opacity: 1;}


::-moz-selection {background-color: #272727; color: #fff; text-shadow: none }
::selection {background-color:#272727; color:#fff; text-shadow:none;}


/**********
* ## common
**********/
.success {background: #d6e9c6;}
.warning {background: #fcf8e3;}
.danger {background: #f2dede;}
.highlight {font-weight: bold; color: #7519FF}

.hide{display: none;}
.img-responsive{width: auto; max-width: 100%;}
.sound-only{position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; margin: -1px;}
.blind {position: absolute; overflow: hidden; clip: rect(0,0,0,0); clip-path: polygon(0 0, 0 0, 0 0); width: 1px; height: 1px; margin: -1px; }

.show-mobile, .show-mobile-xs{display: none;}
/* .hide-mobile{display: block;} */

#skip-contents a {z-index: 100000; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden;}

.label-req{padding-right: 8px; color: #ff5b4d; vertical-align: middle; font-size: clamp(1.4rem, var(--font-20), 2rem);}
label.error{font-size: 14px; color: #e93421;}
/* .error {color:red;} */
.clearfix {clear:both;}
.bold {font-weight:bold !important;}
.fw500{font-weight: 500 !important;}
.fw400{font-weight: 400 !important;}

.help-desc{color: #1473e6;}
.help-block{margin-top: 10px; color: #666; font-size: 14px;}
.help-block.info{color: #1473e6;}
.link{text-decoration: underline; color: #993399;}

.pull-left{float:left;}
.pull-right{float:right !important;}
.mr-auto{margin-right: auto;}
.ml-auto{margin-left: auto;}
.no-padding {padding: 0 !important;}
.text-center {text-align: center !important;}
.text-right {text-align: right;}
.text-left {text-align: left !important;}
.no-post{padding: 3rem 0; text-align: center;}

.font-en{font-family: 'Montserrat', sans-serif;}
.font-xs{font-size: 1.3rem;}
em.angle{font-family: 'Spoqa Han Sans Neo';}

.error-place{position: relative;}
.error-place .error + .error{margin-left: 10px;}

.main-color{color: #6ad784;}
.color{color: #028755;}
.color2{color: #6ad784;}
.text-primary {color: var(--theme-color);}
.text-white {color: #fff;}
.text-danger{color: #39a845;}

.padding-top-0{padding-top: 0 !important;}

.dash li{display: flex;}
.dash li .label{width: 10px; flex-shrink: 0;}
.dash li .text{flex-grow: 1;}

.page-animate { position:relative}
.btn-viewmore span::after,
.ani{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}

.d-flex{display: flex;}
.full-screen {display: block; width: 100%; height: 100vh; overflow: hidden; }


/* .page-scroll-wrap {overscroll-behavior: none; min-height: 100vh;} */
/* html.has-scroll-smooth {backface-visibility: hidden; transform: translateZ(0); }
.page-scroll-wrap {perspective: 1px;}

[data-scroll-container],
[data-scroll-section] {transform-style: preserve-3d; will-change: transform; } */


/**********
* ## ICON
**********/
.icon{background-repeat: no-repeat; background-position: center; background-size: cover; display: inline-block;}
.icon-status{display: inline-block; font-size: 12px; padding: 2px 3px 2px; background: #999; border-radius: 2px; color: #fff;}
.icon-status.ready{background: #999;}
.icon-status.ing{background: #ecb10d;}
.icon-status.finish{background: #028755;}

.ico-arrow-next{background-image: url('../images/icons/arw-d-b.svg'); width: 21px; height: 13px;}
.ico-arrow-next-w{background-image: url('../images/icons/arw-d-w.svg'); width: 21px; height: 13px;}
.ico-arrow-prev{background-image: url('../images/icons/ico-arrow-prev.png'); height: 16px; width: 100%; background-size: 20px;}
.ico-arrow-up{background-image: url('../images/icons/ico-arrow-up.png'); height: 0.7rem; width: 1rem; background-size: 1rem auto;}
.ico-arrow-up-w{background-image: url('../images/icons/ico-arrow-up-w.png'); height: 0.7rem; width: 1rem; background-size: 1rem auto;}
.ico-arrow-down{background-image: url('../images/icons/arw-ud-b.svg'); height: 1rem; width: 1.9rem; background-size: 1.9rem auto;}
.ico-arrow-down-w{background-image: url('../images/icons/ico-arrow-down-w.png'); height: 0.7rem; width: 1rem; background-size: 1rem auto;}
.ico-check{background-image: url('../images/icons/ico-check.png'); width: 17px; height: 13px;}
.ico-check-blue{background-image: url('../images/icons/ico-check-blue.png'); width: 17px; height: 13px;}
.ico-check-grey{background-image: url('../images/icons/ico-check-grey.png'); width: 1.5rem; height: 1.5rem; }

.ico-arrow-more-down{background-image: url('../images/icons/ico-arw-more-s.png'); width: 13px; height: 10px; background-size: 1.3rem auto;}
.ico-arrow-more-down-w{background-image: url('../images/icons/ico-arw-more-s-w.png'); width: 13px; height: 10px; background-size: 1.3rem auto;}

.ico-angle-down{width: 0.9rem; height: 0.6rem; background-image: url('../images/icons/ico-angle-down.png');}
.ico-angle-down-b{width: 0.9rem; height: 0.6rem; background-image: url('../images/icons/ico-angle-down-b.png');}
.ico-angle-right{width: 0.7rem; height: 0.9rem; background-image: url('../images/icons/ico-angle-right.png');}
.ico-angle-right-w{width: 0.7rem; height: 0.9rem; background-image: url('../images/icons/ico-angle-right-w.png');}
.ico-angle-left-w{width: 0.7rem; height: 0.9rem; background-image: url('../images/icons/ico-angle-left-w.png');}

.ico-user{background-image: url('../images/icons/avatar-b-v2.svg'); width: 26px; height: 26px;}
.ico-user-w{background-image: url('../images/icons/avatar-w-v2.svg'); width: 26px; height: 26px;}
.menu-header .ico-user{background-image: url('../images/common/m-avatar.png'); width: 60px; height: 60px; }
.ico-search{background-image: url('../images/icons/search.png'); width: 28px; height: 28px;}
.ico-menu{background-image: url('../images/icons/ico-menu.png'); width: 30px; height: 28px; background-size: 30px 24px;}
.ico-mark{background-image: url('../images/products/mark-match-01.png'); width: 8rem; height: 8rem;}
.ico-mark02{background-image: url('../images/products/mark-match-02.png'); width: 5.3rem; height: 5.3rem;}
.ico-external-link{background-image: url('../images/icons/ico-external-link.png'); width: 15px; height: 15px}
.ico-more-box{background-image: url('../images/icons/ico-more-box.png'); width: 20px; height: 20px;}


.ico-info{background-image: url('../images/icons/ico-info.png'); background-size: 1.5rem; width: 1.5rem; height: 1.5rem;}
.ico-time{background-image: url('../images/icons/ico-time.png'); background-size: 1.5rem; width: 1.5rem; height: 1.5rem;}
.ico-like{background-image: url('../images/icons/ico-like.png'); background-size: 1.2rem; width: 1.2rem; height: 1.2rem;}
.ico-like-on{background-image: url('../images/icons/ico-like-on.png'); background-size: 1.2rem; width: 1.2rem; height: 1.2rem;}
.ico-help{background-image: url('../images/icons/ico-question.png'); background-size: 1.5rem; width: 1.5rem; height: 1.5rem;}
.ico-reminder{background-image: url('../images/icons/ico-reminder.png'); width: 25px; height: 25px;}

.ico-cs{background-image: url('../images/icons/ico-cs-call.png'); width: 30px; height: 30px;}
.ico-location{background-image: url('../images/shop/area.png'); width: 17px; height: 23px;}

.icon-text-wrap{display: flex;}
.align-items-center{align-items: center;}
.icon-text-wrap .icon{flex-shrink: 0; margin-right: 0.5rem; }
.icon-text-wrap .text{display: inline-block; flex-grow: 1; line-height: 1.34;}

.ico-alert{background-image: url('../images/shop/alert.png'); width: 20px; height: 20px;}

.ico-cart{background-image: url('../images/icons/cart-b-v3.svg'); width: 22px; height: 26px;}
.ico-cart-none{background-image: url('../images/shop/cart-none.png'); width: 160px; height: 160px;}
.ico-cart-w{background-image: url('../images/icons/cart-w-v3.svg'); width: 22px; height: 26px;}
.ico-order{background-image: url('../images/main/order.png'); width: 46px; height: 44px; background-size: 46px 35px; background-position: bottom;}
.ico-delivery{background-image: url('../images/icons/delivery-b.svg'); width: 25px; height: 17px;}

.ico-business-license{background-image: url('../images/main/registration.png'); width: 37px; height: 45px; background-size: 37px 45px;}
.ico-social-enterprise{background-image: url('../images/main/certification.png'); width: 37px; height: 45px; background-size: 37px 45px;}

.ico-dibs{background-image: url('../images/shop/dibs-list-g.png'); width: 24px; height: 22px;}
.ico-dibs-gr{background-image: url('../images/shop/dibs-list-gr.png'); width: 24px; height: 22px;}
.ico-dibs-on{background-image: url('../images/shop/dibs-list-on.png'); width: 24px; height: 22px;}

.ico-trash{background-image: url('../images/shop/trash.png'); width: 19px; height: 23px;}
.ico-q{background-image: url('../images/mypage/question.png'); width: 20px; height: 20px;}
.ico-pencil{background-image: url('../images/icons/ico-pencil.png'); width: 26px; height: 28px;}
.tooltip{line-height: 1; margin-left: 0.5rem;}

/**********
* ## INPUT
**********/
input[type="file"].input{font-size: 15px;}
.input-group{position: relative; }
.input-group-btn{position: absolute; top: 0; right: 0;}

.input-container{display: flex; align-items: center; margin-bottom: 10px; position: relative;}

.input{background: #fff; height: 4rem; line-height: 4rem; padding: 0 0 0 10px; border: 1px solid #cbcbcb; -webkit-appearance: none; box-sizing: border-box; font-family: 'Pretendard', sans-serif;}
.input.full{width: 100%;}
.select-box.half{width: 50%;}
.input.half{width: 50%;}
.input.auto{width: auto;}
.input.readonly{background-color: #f0f0f0;}
.input:focus{outline: none;}

select.input{color: #4d4c4c; background:url('../images/icons/ico-select-arrow.png') no-repeat 100% 50%; padding-right: 0; min-width: 100px;}
select.input.full{width: 100%; background-position: 98% 50%; padding-right: 0;}
textarea.input{min-height: 150px; color: #666; padding: 5px; line-height: 1.4;}

.form-group{margin-bottom: 1.5rem; clear: both; position: relative;}
.form-group-lg{margin-bottom: 40px;}
.form-group .label{padding: 0; margin-bottom: 1rem; display: inline-block; font-weight: 500; border-radius: 0; line-height: 1; text-align: left; display: block;}


/**********
* ## TABLE
**********/
.table-wrap table{width: 100%; border-top: 1px solid #ccc;}
.table-wrap table th{font-weight: 400; color: #666;}
.table-wrap table th, .table-wrap table td{padding: 1.4rem 1rem; border-bottom: 1px solid var(--bg-color-cb); background-color: #fff; }
.table-wrap table td.no-post{padding: 3rem 0;}
.table-wrap table thead th{text-align: center; background-color: var(--bg-color-f9);}
.table-wrap table tbody th{width: 30%; text-align: left; }

.table-wrap .table-bg thead th:first-child{border-left: 1px solid #ccc;}
.table-wrap .table-bg thead th:last-child{border-right: 1px solid #ccc;}
.table-wrap .table-bg tbody th{background-color: var(--bg-color-f5);}
.table-wrap .table-bg tbody td{color: #727273;}

.table-desc{background-color: #fff; padding: 20px 20px 35px; color: #757575; margin-top: 20px;}
.table-responsive {display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }


/**********
* ## TABS
**********/
.tabs{display: flex; margin-bottom: 2rem;}
.tabs.line li{margin: 0 10px;}
.tabs.line li.active a{color: #109342}
.tabs.line li a{border: 0; text-align: left; padding: 0.3rem 0; }
.tabs.line li a:hover, .tabs.line li a.active{color: #6ad784}

.tab-content{display: none; opacity: 0; visibility: hidden; transition: opacity .3s ease;}
.tab-content.active{display: block; opacity: 1; visibility: visible;}


/**********
* ## loading
**********/
.wrap-loading{position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.2); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */}
.wrap-loading div{position: fixed; top:50%; left:50%; margin-left: -21px; margin-top: -21px;}


img[loading="lazy"]{opacity: 0; filter: blur(3px); transition: opacity 1s .2s ease;}
img[loading="lazy"].is-loaded{opacity: 1; filter: none; /* transition: filter 3s; */}


/**********
* ## Custom element
**********/
.check-box{position: relative; display: inline-flex; align-items: center; }
.check-box input{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.check-box label{cursor: pointer; margin-left: 2.5rem; font-weight: normal; line-height: 1.2;}
.check-box label span{font-size: 14px;}
.check-box label a{text-decoration: underline;}
.check-box label::before, .check-box label::after {content: ''; position: absolute; top: 0; left: 0;}
.check-box label::after{top: 3px; left: 3px; width: 12px; height: 12px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.check-box label::before{width: 16px; height: 16px; background-color: transparent;  content: ""; border: 1px solid #ccc;}
/* .check-box input:checked + label::before {background-color: #fff;} */
.check-box input:checked + label::after {content: ''; background-color: #235; z-index: 1;}
/*
.check-box.bg-white label::before{width: 18px; height: 18px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: "";  border: 1px solid #ccc;}
 .check-box.border label::before{border: 1px solid #ccc; width: 16px; height: 16px;}
.check-box.border input:checked + label::after {width: 12px; height: 12px;}
*/
.check-box-inline{display: inline-flex;}
.check-box-inline + .check-box-inline{margin-left: 1rem;}

.check-box.icon{position: relative;}
.check-box.icon label{margin-left: 3rem; line-height: 1.4;}
.check-box.icon label::before{background: url('../images/icons/check-none.png') no-repeat center/cover; width: 2rem; height: 2rem; top: 0; border: 0;}
.check-box.icon label::after{top: 0; left: 0; transition: none;}
.check-box.icon input:checked + label::after {background: url('../images/icons/check-none-g.png') no-repeat center/cover; width: 2rem; height: 2rem; top: 0}

.check-box.icon.no-text{width: 20px; height: 20px;}
.check-box.icon.dark input:checked + label::after {background-image: url('../images/icons/check-on-gr.png')}

.check-box.rtl input[type=checkbox]{left: auto; right: 0;}
.check-box.rtl label{margin-left: 0; margin-right: 25px;}
.check-box.rtl label::before, .check-box.rtl label::after {content: ''; position: absolute; top: -2px; left: auto; right: 0;}
.check-box.rtl label::before{background: #fff;}
.check-box.rtl input:checked + label::after {left: auto; top: -2px}


.radio-box{position: relative; display: flex; align-items: center;}
.radio-box input[type=radio]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.radio-box label{display: inline; cursor: pointer; text-align: center; margin-left: 2.6rem; font-weight: normal; line-height: 1.5; color: #000;}
.radio-box label::before, .radio-box label::after {content: ''; position: absolute; top: 0; left: 0;}
.radio-box label::after {top: 4px; left: 4px;  width: 12px; height: 12px; border-radius: 50%;}
.radio-box label::before{width: 20px; height: 20px; border: 1px solid var(--bg-color-a4);  -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; border-radius: 50%; }

.radio-box.bg-white label::before{width: 14px; height: 14px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; border: 1px solid #e1e1e1;}
.radio-box input[type="radio"]:checked + label::after {content: ''; width: 14px; height: 14px; top: 4px; left: 4px; background-color: var(--theme-color); z-index: 1; border-radius: 50%;}
/* .radio-box input[type="radio"]:checked + label::before {background-color: transparent;} */
.radio-box.border label::before{border: 1px solid #ccc; width: 16px; height: 16px;}
.radio-box.border input[type="radio"]:checked + label::after {width: 12px; height: 12px;}

.radio-box.square label::before{border-color: #e1e1e1; border-radius: 0;}
.radio-box.square label::after {top: 0; left: 0; background-color: transparent; }
.radio-box.square input[type="radio"]:checked + label::after {background: url('../images/icons/ico_checkbox-act.png') center/cover; width: 16px; height: 16px; top: 0; left: 0; border-radius: 0;}

.radio-box.icon{vertical-align: middle; line-height: unset;}
.radio-box.icon label{display: inline; width: 31px; height: 31px; cursor: pointer; text-align: center; margin-left: 0; padding-left: 45px; font-weight: normal; vertical-align: middle; line-height: unset;}
.radio-box.icon label::before, .radio-box.icon label::after {content: ''; position: absolute; top: 0; left: 0;}
.radio-box.icon label::before{width: 31px; height: 31px; background: url('../images/icons/ico_check_dft.png') no-repeat center/cover; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; }
.radio-box.icon input[type="radio"]:checked + label::after {content: '';  z-index: 1; background: url('../images/icons/ico_check_act.png') no-repeat center/cover; width: 31px; height: 31px; top: -2px; left: 0;}
.radio-box.icon input[type="radio"]:checked + label::before {background-color: #fff;}

.radio-box.icon + .radio-box.icon{margin-left: 60px;}
.form-table .radio-box.icon + .error-place{top: 120%;}


.select-box{display:block;position:relative;width:300px;text-align:left;border:1px solid var(--bg-color-cb); }
.select-box.full{width: 100%;}
.select-box.full .btn-select{background-position: 98% 50%;}
.select-box.width-auto{width: auto; min-width: 120px;}
.select-box .select{display:block;position:absolute;left:0;top:0;width:100%;height:100%;font-size:2em;color:#666;filter:alpha(opacity=0);opacity:0;z-index:1}
.select-box .btn-select{display:block;position:relative;padding:0 40px 0 10px; height:4rem; line-height:4rem; background: url("../images/icons/ico-down-b.png") no-repeat right center; background-size: 10px; background-position: 95% 50%; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:1; }
.select-box .select-list{display:none;position:absolute; left:0; top:100%; right:0; padding:10px 0; margin-top:-1px; border-radius:4px; box-shadow: 0px 2px 4.8px 0.3px rgba(0, 0, 0, 0.2); border: solid 1px #e5e5e5; background-color: #ffffff; max-height: 300px; overflow-y: auto;}
.select-box .select-list li{position: relative;}
.select-box .select-list a{display:block;padding:8px 5px 9px; color:#333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; text-align: center;  }
.select-box .select-list a:hover{background-color: #f2f2f2; }
.select-box.scroll .select-list{max-height: 300px; overflow-y: scroll;}
.select-box.active{z-index:50}
.select-box.active .select-list{display:block;z-index:50}
.select-box.active.scroll .select-list { height:240px; overflow-y:auto}
.select-box.active .btn-select{border-color:#333; }


/**********
* ## Grid
**********/
.row{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; box-sizing: border-box; margin-right: -15px; margin-left: -15px;}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }

.col-12{flex: 0 0 100%; max-width: 100%; }
.col-6{flex: 0 0 50%; max-width: 50%;}
.col-4{flex: 0 0 33.33333%; max-width: 33.33333%;}
.col-3{flex: 0 0 25%; max-width: 25%;}
.col-2{flex: 0 0 20%; max-width: 20%;}

.row.space-5{margin-left: -5px; margin-right: -5px;}
.row.space-5 [class*="col-"]{padding-left: 5px; padding-right: 5px;}

.row.space-half{margin-left: -7.5px; margin-right: -7.5px;}
.row.space-half [class*="col-"]{padding-left: 7.5px; padding-right: 7.5px;}

.row.space-10{margin-left: -10px; margin-right: -10px;}
.row.space-10 [class*="col-"]{padding-left: 10px; padding-right: 10px;}

.row.space-13{margin-left: -13px; margin-right: -13px;}
.row.space-13 [class*="col-"]{padding-left: 13px; padding-right: 13px;}

.row.space-20{margin-left: -20px; margin-right: -20px;}
.row.space-20 [class*="col-"] {padding-left: 20px; padding-right: 20px;}

.row.space-25{margin-left: -25px; margin-right: -25px;}
.row.space-25 [class*="col-"] {padding-left: 25px; padding-right: 25px;}

.row.space-35{margin-left: -35px; margin-right: -35px;}
.row.space-35 [class*="col-"] {padding-left: 35px; padding-right: 35px;}


/**********
* ## BADGE
**********/
.badge{display: inline-block; text-align: center; padding: 10px 30px 8px; border-radius: 4px; line-height: 1; background-color: rgba(0, 0, 0, 0.2); color: #fff; font-size: 12px;}
.badge-primary{background-color: var(--key-color); color: #fff;}
.badge-second{background-color: var(--second-color); color: #fff;}
.badge-info{background-color: #ddd; }
.badge-addr{border: 1px solid var(--theme-color); color: var(--theme-color); font-size: 12px; letter-spacing: 0.6px; padding: 3px; background-color: #fff;}

.badge-complete{background-color: none; border: 1px solid #39a845; color: #39a845; font-size: 14px;}
.badge-yet{background-color: none; border: 1px solid #666; color: #666; font-size: 14px;}

/**********
* ## PROGRESS
**********/
.progress {display: flex; height: 2rem; overflow: hidden; line-height: 0; font-size: 1.5rem; background-color: var(--bg-color-f5); border-radius: 1rem; position: relative}
.progress-bar {display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; background-color: var(--bg-color-f5); transition: width 0.6s ease; border-radius: 1rem;}
.progress svg{stroke: var(--bg-color-f5); border-radius: 1rem;}


.progress.circle{border-radius: 50%; width: 10rem; height: 10rem; margin: 0 auto;}
.progress.circle .progress-bar{width: 100%; background-color: #fff; }
.progress.circle svg{stroke-linecap: round}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {transition: none;}
}


/**********
* ## BUTTON
**********/
.btn.full{width: 100%;}
.btn {display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; line-height: 1.42857143; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 8px 10px 6px; min-width: 110px; transition: all 0.2s ease;}
.btn:active, .btn.active {background-image: none;}
a.btn{padding: 11px 25.3px;}

.btn-round{border-radius: 4px;}

.btn-xs{padding: 7px 6px 9px; min-width: auto; line-height: 1; font-size: 13px; min-width: 80px;}

.btn-default {border-color: #dbdbdb; border-color: #ccc;}
.btn-default:hover, .btn-default:focus {background-color: #e0e0e0; background-position: 0 -15px;}
.btn-default:active, .btn-default.active {background-color: #e0e0e0; border-color: #dbdbdb;}

.btn-priority{background-color: var(--theme-color); border-color: var(--theme-color); color: #ffffff;}

.btn-primary {color: #fff; background-color: var(--theme-color); border-color: var(--theme-color); background-image: none;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {color: #fff; background-color: #393939; border-color: #393939;}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {background-color: #233b4d; border-color: #233b4d;}
.btn-primary .badge {color: #348fe2; background-color: #fff;}

.btn-danger {color: #fff; background-color: #b20158; border-color: #b20158; background-image: none;}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {color: #fff; background-color: #ce4741; border-color: #ce4741;}
.btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active {background-color: #ff5c57; border-color: #ff5c57;}
.btn-danger .badge {color: #ff5c57; background-color: #fff;}

.btn-warning {color: #fff; background-color: #ecb10d; border-color: #ecb10d; background-image: none;}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {color: #fff; background-color: #c57e00; border-color: #c57e00;}
.btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active {background-color: #f49b1b; border-color: #f49b1b;}
.btn-warning .badge {color: #f49b1b; background-color: #fff;
}

.btn-info {color: #fff; background-color: #0e9bf5; border-color: #0e9bf5; background-image: none;}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {color: #fff; background-color: #3492ac; border-color: #3492ac;}
.btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active {background-color: #49b6d5; border-color: #49b6d5;}
.btn-info .badge {color: #49b6d5; background-color: #fff;}

.btn-success {color: #fff; background-color: #028755; border-color: #028755; background-image: none;}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {color: #fff; opacity: 0.8;}
.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active {background-color: #028755; border-color: #028755;}
.btn-success .badge {color: #028755; background-color: #fff;}

.btn-silver {color: #fff; background-color: #b7c2c8; border-color: #b7c2c8; background-image: none;}
.btn-silver:hover, .btn-silver:focus, .btn-silver:active, .btn-silver.active,.open .dropdown-toggle.btn-silver {color: #fff; background-color: #929ba2; border-color: #929ba2;}
.btn-silver.disabled, .btn-silver[disabled], fieldset[disabled] .btn-silver, .btn-silver.disabled:hover, .btn-silver[disabled]:hover, fieldset[disabled] .btn-silver:hover, .btn-silver.disabled:focus, .btn-silver[disabled]:focus, fieldset[disabled] .btn-silver:focus, .btn-silver.disabled:active, .btn-silver[disabled]:active, fieldset[disabled] .btn-silver:active, .btn-silver.disabled.active, .btn-silver[disabled].active, fieldset[disabled] .btn-silver.active {background-color: #b7c2c8; border-color: #b7c2c8;}
.btn-silver .badge {color: #b7c2c8; background-color: #fff;}

.btn-dark {color: #fff; background-color: #2c353c; border-color: #2c353c; background-image: none;}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {color: #fff; background-color: #000; border-color: #000;}
.btn-dark.disabled, .btn-dark[disabled], fieldset[disabled] .btn-dark, .btn-dark.disabled:hover, .btn-dark[disabled]:hover, fieldset[disabled] .btn-dark:hover, .btn-dark.disabled:focus, .btn-dark[disabled]:focus, fieldset[disabled] .btn-dark:focus, .btn-dark.disabled:active, .btn-dark[disabled]:active, fieldset[disabled] .btn-dark:active, .btn-dark.disabled.active, .btn-dark[disabled].active, black fieldset[disabled] .btn-dark.active {background-color: #2c353c; border-color: #2c353c;}
.btn-dark .badge {color: #2c353c; background-color: #fff;}

.btn.disabled {pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65;}

.btn-cancel, .sp-submit.btn-cancel{background: #cbcbcb; display: inline-block; color: #666;}
.btn-cancel:hover{background-color: #a7a8a9; color: #fff;}

.btn-gray{background: #626262; display: inline-block; color: #fff;}
.btn-gray:hover{background: #888; }

.btn-border, .sp-submit.btn-border{border: 1px solid var(--bg-color-28); background-color: #fff; color: var(--theme-color);}
.btn-border:hover, .sp-submit.btn-border:hover{background-color: #f5f5f5; color: #0a0a0a;}


.btn-none{cursor: no-drop; background-color: #ccc !important; border: 1px solid #ccc !important;}

.sp-submit{height: 5rem; line-height: 5rem; background-color: var(--theme-color); color: #fff; padding: 0; min-width: 15rem; display: inline-block; text-align: center;  border: 0; width: 100%; max-width: 35rem; transition: background-color ease .2s;}
.sp-submit:hover{background-color: #393939; color: #fff;}
.sp-submit.full{max-width: 100%;}
.sp-submit.lg{height: max(5rem, var(--vw-70)); line-height: max(5rem, var(--vw-70)); font-size: clamp(1.6rem, var(--font-20), 2rem);}
.btn-group{position: relative;}
.btn-group .btn + .btn{margin-left: 1rem;}


.btn-icon-wrap{display: inline-flex; align-items: center; justify-content: center;}
.btn-icon-wrap .text{line-height: 1; }
.btn-icon-wrap > .icon{margin-left: 1rem;}
.btn-icon-wrap.rtl > .icon{margin-right: 1rem;}
.btn-icon-wrap.more .icon{margin-left: 5px; margin-top: -1px;}
/* .btn-icon-wrap .ico-arrow-next{background-image: url('../images/icons/ico-arrow-next.png'); width: 18px; height: 13px}
.btn-icon-wrap .ico-arrow-next-w{background-image: url('../images/icons/ico-arrow-next.png'); width: 1rem; height: .8rem;} */
.btn-icon-wrap .btn-submit{display: inline-flex;}
.btn-icon-wrap.rtl .icon{margin-left: 0; margin-right: 1rem;}
.btn-wrap{position: relative; text-align: center;}
.btn-flex-wrap{display: flex; justify-content: center;}
.btn-admin-wrap{margin-bottom: 1rem; text-align: right;}


.btn-close{width: 25px; height: 25px; text-indent: -9999px; cursor: pointer;}
.btn-close.cross:before, .btn-close.cross:after{width: 100%; height: 2px; top: 50%; left: 0; content: ""; background: #121212; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); position: absolute;}
.btn-close.cross:after {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);}
.btn-close.cross.white:before, .btn-close.cross.white:after{background-color: #fff;}
.btn-close.icon{background: url('../images/icons/ico-close-b.png') no-repeat center/cover; background-size: 16px; width: 30px; height: 30px;}
.btn-close.icon.white{background: url('../images/icons/ico-close-w.png') no-repeat center/cover; background-size: 16px; background-position: center right;}

.btn-fixed{position: absolute; top: 1.5rem; right: 2rem;}


/**********
* ## alert
**********/
.alert {padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; position: relative;}
.alert h4 {margin-top: 0; color: inherit;}
.alert .alert-link {font-weight: bold;}
.alert > p, .alert > ul {margin-bottom: 0;}
.alert > p + p {margin-top: 5px;}
.alert-dismissible, .alert-dismissible {padding-right: 35px;}
.alert-dismissible .close, .alert-dismissible .close {position: absolute; top: 50%; right: 15px; margin-top: -10px; color: inherit;}

.alert-success {color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;}
.alert-success hr {border-top-color: #c9e2b3;}
.alert-success .alert-link {color: #2b542c;}

.alert-info {color: #31708f; background-color: #d9edf7; border-color: #bce8f1;}
.alert-info hr {border-top-color: #a6e1ec;}
.alert-info .alert-link {color: #245269;}

.alert-warning {color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc;}
.alert-warning hr {border-top-color: #f7e1b5;}
.alert-warning .alert-link {color: #66512c;}

.alert-danger {color: #a94442; background-color: #f2dede; border-color: #ebccd1;}
.alert-danger hr {border-top-color: #e4b9c0;}
.alert-danger .alert-link {color: #843534;}



/**********
* ## layer popup
**********/
.layer-popup{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; transition: all 0.3s; overflow-y: auto;}
.layer-popup.active{display: block; animation: aniFadeIn 0.5s; -moz-animation: aniFadeIn 0.5s; -webkit-animation: aniFadeIn 0.5s; -o-animation: aniFadeIn 0.5s;}
.layer-dim{position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #000; opacity: .4; z-index: 1}
.pop-wrap{position: absolute; top: 50%; left: 50%; z-index: 20; width: 90%;}
.pop-header{background-color: #fff; position: sticky; top: 0; z-index: 10; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 6rem 6rem 3rem;}
.pop-header h3{font-size: clamp(2.4rem, var(--font-36), 3.6rem); font-weight: 700;}
.pop-content{background-color: #fff; padding: 0 6rem 6rem; min-height: 15rem; }
.pop-content h4{font-size: 2.4rem; margin-bottom: 10px;}
.pop-content .pop-title{font-size: 1.8rem; margin-bottom: 1.5rem; font-weight: 600;}
.pop-content strong{font-weight: 500;}
.pop-wrap .btn-close{display: block; position: relative; width: 34px; height: 34px; z-index: 11;}
.pop-footer{background-color: #fff;}
.pop-footer button{height: 5rem; flex: 1;}
.pop-footer button + button{border-left: 1px solid var(--bg-color-d1);}
.pop-footer .btn-close{position: relative; width: auto; height: auto; top: 0; left: 0; right: 0; text-indent: 0;}
.pop-footer .btn-confirm{color: var(--ad-color-07);}

.pop-status .pop-header{padding: 2rem;}
.pop-status .pop-wrap .btn-close{position: absolute; right: -4px; top: -35px;}

.layer-popup.modal .pop-wrap{width: 90%; max-width: 500px; box-shadow: 0 0 8.5px 1.5px rgba(9, 9, 9, 0.1); border: 1px solid var(--bg-color-d1);}
.layer-popup.modal .pop-content{display: flex; align-content: center; justify-content: center; flex-direction: column;}
.layer-popup.modal .pop-footer{display: flex; border-top: 1px solid var(--bg-color-d1);}


/* .layer-popup.full .pop-footer .btn-wrap{padding: 1.5rem;}
.layer-popup.full .pop-footer .btn-close{position: relative; width: 100%; height: 4.5rem; line-height: 4.5rem; text-indent: 0; padding: 0;} */

.layer-popup.pop-sns .pop-wrap{max-width: 1400px;}
.layer-popup.pop-sns .pop-content{display: flex;}
.layer-popup.pop-sns .pop-content .image{width: 49%; max-height:700px; }
.layer-popup.pop-sns .pop-content .inner{width: 51%; margin-left: 6rem;}
.layer-popup.pop-sns .pop-content .image img{width: 100%; height: 100%; object-fit: cover;}

.pop-shop-info{display: flex; justify-content: space-between; margin-bottom: 3rem;}
.pop-shop-info .thumb{width: 48.217%; flex-shrink: 0; position: relative;}
.pop-shop-info .thumb::after{position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #ececec; content: '';}
.pop-shop-info .thumb img{width: 100%;}
.pop-shop-info .pop-shop-pd{margin-left: 3rem; flex-grow: 1;}
.pop-shop-info .pop-shop-pd .title{font-size: clamp(1.6rem, var(--font-20), 2.8rem);}
.pop-shop-info .pop-shop-pd .desc{color: #a6a6a6; margin-top: 5px;}
.pop-shop-info .pop-shop-pd a{display: block; background-color: #8f1d22; color: #fff; padding: 1.4rem 0; width: 100%; margin-top: 2.5rem; text-align: center;}

.pop-sns-container{border: 1px solid #ececec;}
.pop-sns-header{border-bottom: 1px solid #ececec; display: flex; align-items: center; padding: 1rem 3rem;}
.pop-sns-header .sns-icon{background-color: var(--theme-color); border-radius: 50%; width: 4rem; height: 4rem; margin-right: 1rem; display: flex; align-items: center; justify-content: center;}
.pop-sns-cont{padding: 3rem;}
.pop-sns-cont .pop-sns-tag{font-size: 0.875em; margin-top: 10px;}


.pop-gallery-swiper{height: 100%; position: relative;}
.layer-popup.pop-gallery .pop-content .loading{position: absolute; top: 50%; left: 0; right: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; height: 40px; background: url('../images/ajax-loader.gif') center no-repeat; background-size: 40px; display: none;  z-index: 10;}
.layer-popup.pop-gallery .pop-content.loading .loading{display: block;}
.layer-popup.pop-gallery .pop-content.loading .cont{opacity: 0;}
.layer-popup.pop-gallery .pop-content.loading .aside{opacity: 0;}
.layer-popup.pop-gallery .pop-wrap{max-width: 1600px;}
.layer-popup.pop-gallery .swiper{height: 100%;}
.layer-popup.pop-gallery .pop-content{display: flex; padding: 0 6rem 0; height: auto; overflow-y: visible;}
.layer-popup.pop-gallery .pop-content .cont{width: 72.974%; max-height:calc(100vh - 15.8vw); max-height: 600px; position: relative; opacity: 1;}
.layer-popup.pop-gallery .pop-content .cont::before{content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #ececec; }
.layer-popup.pop-gallery .pop-content .cont img{width: 70%; height: auto; max-height: 598px; object-fit: cover; margin: 0 auto; display: block;}
.layer-popup.pop-gallery .pop-content .cont a{display: flex; align-items: center; justify-content: center; height: 100%;}
.layer-popup.pop-gallery .view-situ .pop-content .cont img{width: 100%; height: calc(100vh - 15.8vw); max-height: 600px;}

.layer-popup.pop-gallery .pop-content .aside{width: 27.026%; padding-left: 3rem; opacity: 1;}
.layer-popup.pop-gallery .pop-footer{position: relative; padding: 0;}
.layer-popup.pop-gallery .pop-footer ul{display: flex; padding: 3rem 6rem; }
.layer-popup.pop-gallery .pop-footer ul li{margin-right: 1.5rem;}
.layer-popup.pop-gallery .pop-footer ul li a{line-height: 1; padding: 6px 12px; border: 1px solid #ececec; border-radius: 14px; display: inline-block; font-size: 14px; color: #28282a;}
.layer-popup.pop-gallery .pop-footer ul li a.active{border-color: #a0a0a0; font-weight: 600;}

.layer-popup.pop-gallery .swiper-slide:hover .inner-shop{opacity: 1;}

.inner-shop{position: absolute; top: 3rem; left: 3rem; background-color: #fff; opacity: 0; transition: opacity .3s ease;}
.inner-shop .view-shop{padding: 3rem;}
.inner-shop .view-shop a{display: block !important}
.inner-shop .view-shop .title{margin-top: 10px;}
.layer-popup.pop-gallery .pop-content .cont .inner-shop .view-shop img{width: auto; height: auto;}

.pop-gallery .pop-content .cont .info{position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); padding: 2.35rem 3rem; display: flex; align-items: center; justify-content: space-between; z-index: 1; opacity: 0; transition: opacity .3s ease;}
.pop-gallery .pop-content .cont .info.active{opacity: 1;}
.pop-gallery .pop-content .cont .info > div{color:#e3e3e3;}
.pop-gallery .pop-content .cont .info .title{font-weight: 600; margin-bottom: 5px;}
.pop-gallery .pop-content .cont .info .btns{display: flex;}
.pop-gallery .pop-content .cont .info .btns a{background-color: #28282a; color: #fff; font-size: 14px; line-height: 1; padding: 1rem 2rem;}
.pop-gallery .pop-content .cont .info .btns a + a{margin-left: 1rem; background-color: #f2f2f2; color: #0d0d0d;}
.pop-gallery .pop-content .aside .swiper-bar{overflow-y: auto; height: calc(100vh - 15.8vw); max-height: 600px; padding-right: 1rem;}
.pop-gallery .pop-content .aside .swiper-bar ul{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.pop-gallery .pop-content .aside .swiper-bar ul li{max-width: 160px; position: relative; height: 120px;}
.pop-gallery .pop-content .aside .swiper-bar ul li a{ display: inline-block; width: 100%; height: 100%;}
.pop-gallery .pop-content .aside .swiper-bar ul li a::after{content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); border:1px solid #ececec; z-index: 2;}
.pop-gallery .pop-content .aside .swiper-bar ul li a.active::after{width: calc(100% - 10px); height: calc(100% - 10px); border:5px solid #8f1d22; }
.pop-gallery .pop-content .aside .swiper-bar ul li img{width: 100%; height: 100%; object-fit: cover;}

.layer-popup.pop-gallery model-viewer{height: 100%; object-fit: contain; width: 100%;}
.layer-popup.pop-gallery iframe {height: calc(100vh - 15.8vw); max-height: 600px; object-fit: cover; width: 100%;}
.layer-popup.pop-gallery .view-360 .pop-content .cont{width: 100%; height: calc(100vh - 16vw); max-height: 600px;}
.layer-popup.pop-gallery .view-360 .pop-content .cont .info,
.layer-popup.pop-gallery .view-video .pop-content .cont .info{display: none;}
.layer-popup.pop-gallery .view-360 .pop-content .aside{display: none;}
.layer-popup.pop-gallery .view-360 .pop-content .pop-gallery-swiper{height: 100%;}


.layer-popup.pop-category.navCategory{position: absolute;}
.pop-category .pop-wrap .btn-close{position: absolute; right: 15px; text-indent: 0; width: 46px; height: 46px; }
.pop-category .pop-wrap .btn-close .icon{transform: rotate(180deg); }
.pop-category .pop-wrap .pop-header{padding: 2rem 1.5rem 0;}
.pop-category .pop-wrap .pop-header h3{font-size: 16px;}
.pop-category .pop-wrap .pop-content{padding: 3rem 1.5rem 4rem;}

.pop-category .pop-content ul li{margin-top: -1px; width: 100% !important; margin-right: 0 !important;}
.pop-category .pop-content ul li a{display: block; color: #a0a0a0; border: 1px solid #e3e3e3; text-align: center; padding: 1.05rem 1rem;}
.pop-category .pop-content ul li a:hover, .pop-category .pop-content ul li a.active{display: block; color: #fff; background-color: #0d0d0d;}


.alert-layer{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999}
.alert-dim{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #000; opacity: .4; z-index: 1}
.alert-container{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; background: #f9f9f9; z-index: 20; width: 50%; max-width: 300px; text-align: center;}
.alert-container .btn-confirm{margin-top: 30px; background-color: #ecb10d; color: #fff; height: 40px; line-height: 40px; font-size: 15px; display: inline-block; min-width: 100px; text-align: center; border-radius: 5px;}


/**********
* ## card new win
**********/
.card{position: relative;}
.card-title{font-size: 1.8rem; padding: 2rem; border-bottom: 1px solid #ddd; }
.card-wrap{padding: 2rem 2rem 4rem;}


/**********
* ## Elementpath
**********/

.mb-0{margin-bottom: 0 !important;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}


/**********
* ## scroll-to-top
**********/
.scroll-to-top{position: relative; z-index: 99; opacity: 0; visibility: hidden; margin: 0 auto;}
.scroll-to-top.visible {visibility: visible!important; opacity: 1!important;}
.scroll-to-top a{background: url('../images/common/btn-top.png') no-repeat center/cover; width: 50px; height: 50px; text-indent: -9999px; box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.1); }


/* .scroll-to-top .scroll-top-inner {opacity: 0; visibility: hidden; width: 4rem; height: 4rem; border: 1px solid #cdcdcd; background-color: #fff; text-align: center; border-radius: 50%; cursor: pointer; }
.scroll-to-top .scroll-top-inner{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s; -o-transition: all cubic-bezier(.4,0,.2,1) .4s; transition: all cubic-bezier(.4,0,.2,1) .4s; justify-content: center; flex-direction: column;}
.scroll-to-top .scroll-bar {width: 50px; height: 2px; margin-right: 10px; position: relative;}
.scroll-to-top .scroll-bar:before {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #fff; opacity: .3; }
.scroll-to-top .scroll-bar .bar-inner {position: absolute; top: 0; left: 0; height: 100%; background-color: #131313;}
.scroll-to-top .scroll-bar-text{font-weight: 600; cursor: pointer; transition: all 500ms ease; color: #000; display: none;}
.scroll-to-top .scroll-top-icon{background-image: url('../images/icons/ico-btn-top-up.png') ; width: 18px; height: 10px; } */

/* .scroll-to-top .scroll-bar-text:hover{transform: scale(1.1);} */

/* #scroll-top{position: fixed; right: 10%; bottom: 10%; background-color: #233b4d; width: 35px; height: 35px; line-height: 30px; font-weight: 500; font-size: 12px; color: #fff; border-color: #233b4d; border-top: 0; opacity: 0; transition: all 0.3s ease; text-align: center;}
#scroll-top.active{opacity: 1;}
.btn-top{background: #2351b1 url('../images/common/quick_top.png') no-repeat center/cover; display: inline-block; width: 35px; height: 35px;}
.btn-top:hover{background-color: #028755; opacity: 0.6;} */


/**********
* ## paging
**********/
.pagination{position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 30px;}
.pagination li{position: relative; width: 26px; height: 26px; line-height: 26px; vertical-align: middle; margin: 0 5px;}
.pagination li a{display: block;  text-align: center; background-color: #f9f9f9; border-radius: 4px;}
.pagination li.active a{color: #fff; background-color: #0a0a0a;}

.btn-paging{background-repeat: no-repeat; background-image: url('../images/btns/paginate.gif'); display: inline-block; width: 100%; text-indent: -9999px;}
.btn-paging.first-page{background-position: -4px -4px;}
.btn-paging.next-page{background-position: -81px -4px;}
.btn-paging.prev-page{background-position: -41px -4px;}
.btn-paging.last-page{background-position: -118px -4px;}


/**********
* ## ERROR
**********/
.error-wrap {background:url('../images/common/bg_error.gif') no-repeat center top; padding:100px 25px 35px; margin:150px auto 0; text-align:center; width:100%; max-width: 580px;  position:relative; overflow:hidden}
.error-header {color:#333; font-size:25px; font-weight:normal; display:block; padding:20px 0 30px; letter-spacing:-1px}
.error-header strong {display:block; font-size:70px}	

.error-text {border-top:1px solid #e0e0e0; padding:30px 0 40px; text-align:center; font-size:16px; color:#666; line-height:22px; letter-spacing:-1px}
.error-btn {text-align:center; display: flex; align-items: center; justify-content: center;}
.error-btn a{background-color: #fff; color: var(--theme-color); border: 1px solid #16d977; flex: 1;} 
.error-btn a:hover{background-color: #999; border-color: #999;}
.error-btn a + a{margin-left: 1rem; background-color: var(--theme-color); color: #fff; border: 0;}


/**********
* ## EDITOR
**********/
.table{width: 100%; margin-bottom: 1rem;}
.table-bordered th, .table-bordered td {border: 1px solid #e3e6f0;}
.table th, .table td {padding: 0.75rem; vertical-align: middle; border-top: 1px solid #e3e6f0;}


@media screen and (min-width:768px) {	
	.ani.page-animate{ opacity: 0; -webkit-transform:translateY(150px);-moz-transform:translateY(150px);-ms-transform:translateY(150px);transform:translateY(150px);-webkit-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-moz-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-ms-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-o-transition:transform 0.5s cubic-bezier(0,0,0.58,1);transition:transform 0.5s cubic-bezier(0,0,0.58,1)}

	.ani.page-animate.animate_delay{-webkit-transform:translateY(300px);-moz-transform:translateY(300px);-ms-transform:translateY(300px);transform:translateY(300px);-webkit-transition:transform 0.4s cubic-bezier(0,0,0.58,1);-moz-transition:transform 0.4s cubic-bezier(0,0,0.58,1);-ms-transition:transform 0.4s cubic-bezier(0,0,0.58,1);-o-transition:transform 0.4s cubic-bezier(0,0,0.58,1);transition:transform 0.4s cubic-bezier(0,0,0.58,1)}

	.ani.page-animate.animate{opacity: 1; -webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}

	
	.col-md-2{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -moz-box-flex: 0; -moz-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%;}
	.col-md-3{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -moz-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
	.col-md-4{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -moz-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%;}
	.col-md-5{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 41.66666667%; -moz-box-flex: 0; -moz-flex: 0 0 41.66666667%; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%;}
	.col-md-6{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.col-md-8{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -moz-box-flex: 0; -moz-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%;}


}

@media (min-width: 992px) {
	.col-lg-2 {flex: 0 0 16.66667%; max-width: 16.66667%;}
	.col-lg-4{flex: 0 0 33.33333%; max-width: 33.33333%;}
	.col-lg-6{flex: 0 0 50%; max-width: 50%;}
	.col-lg-8{flex: 0 0 66.66667%; max-width: 66.66667%;}
}

@media screen and (max-width:767px) {
	.bg_cover{background-size:cover;}


	.mani.page-animate{ opacity: 0; -webkit-transform:translateY(50px);-moz-transform:translateY(50px);-ms-transform:translateY(50px);transform:translateY(50px);-webkit-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-moz-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-ms-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-o-transition:transform 0.5s cubic-bezier(0,0,0.58,1);transition:transform 0.5s cubic-bezier(0,0,0.58,1);}

	.mani.page-animate td {border-color:transparent}

	tr.mani.page-animate {position:relative; display: table; width:100%; table-layout: fixed}
	tr.mani.page-animate::after { content:"";width:100%; height:1px; background:#d5d5d5; display:block; position: absolute;bottom:0; left:0; }
	tr.mani.page-animate::after{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}

	.bbs-table table tbody tr.mani.page-animate td.subject {width:76%;padding-right:0}
	.bbs-table table tbody tr.mani.page-animate td:last-child {width:24%}

	.mani.page-animate.animate{opacity: 1; -webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}

	/*.mani.page-animate.animate::after {width:100%;}*/
	
}

@media screen and (max-width:520px) {
	.col-xs-12{width: 100%; max-width: 100%; flex: 100%;}
}

@media print {
	/* margin: auto auto; 로 자동 여백 설정도 가능 */
    /* body{
        width: 210mm;
        height: 297mm;
        margin: 0;
   }  */
}