@charset "utf-8";

@import url("setting.css");

a{ color: var(--color-10); text-decoration:none; transition: 0.2s all;}
a:hover{ color: var(--color-01); text-decoration: none;}
a:focus{ text-decoration: none;}

.container{ max-width: 1240px; padding: 0 20px; }
.container.w2{ max-width: 1400px; }
.container.w3{ max-width: 951px; }
.container.w3{ max-width: 728px; }
.container.w4{ max-width: 546px; }

/*** HEADER ***/
header{ width: 100%; height: var(--height-01); padding: 0; background: #fff; border-bottom: 1px solid #ccc; /*position: fixed; top: 0; z-index: 999;*/ }

.logo{ float: left; margin: 16px 0; padding: 0; background: url('../../inc/img/pic-logo.webp') center center no-repeat; background-size: cover; text-indent: -9999px;}
.logo a{ width: 81px; height: 14px; display: block; }

/* header.active{ height: 89px; position: fixed; z-index: 999;} */
/*** /HEADER ***/

/*** BREADCRUMB ***/
nav[aria-label="breadcrumb"]{ padding:8px 0 7px 0; font-size: .875em; color: #999; background: #f9f9f9; border-top: 0px solid #ddd; border-bottom: 1px solid #ddd; }
ol.breadcrumb{ margin: 0; padding: 0;}
.breadcrumb-item:before{ color: #999 !important; }
.breadcrumb-item.active{ color: var(--color-01); font-weight: bold; }
ol.breadcrumb a{ color: #999; }
ol.breadcrumb a:hover{ color: var(--color-01); }
/*** /BREADCRUMB ***/

/*** CNT ***/
main{ min-height: calc(100vh - 281px); background: #fff; }

section{ padding: var(--padding-01); }
section h2{ margin-bottom: 25px; }

#bnr_inr{ padding: 0; }
#bnr_inr img{ width: 100%; height: auto; }

.promo-grid { width: 100%; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px;}
.item { position: relative; overflow: hidden;}
.item img { width: 100%; height: 100%; object-fit: cover;}
.item .item_cap { width: 100%; padding: 15px 20px; color: var(--color-12); background: rgba(0, 0, 0, .75); position: absolute; bottom: 0; transform: translateY(100%); transition: transform 0.3s ease; }
.item:hover .item_cap { transform: translateY(0); }
.item .item_cap p{ font-size: .813em; }
.item .item_cap span{ font-size: .75em; }
.item .item_cap span i{ margin-right: 5px; }
.main-bnr { grid-row: 1 / span 2; aspect-ratio: 16 / 9;}
.side-bnr { width: 100%; height: 100%;}

#sort .sort_wrap{ margin: 0; padding: 0; list-style: none; }
#sort .sort_wrap li{ margin: 0 0 0 10px; padding: 0 12px 2px 0; line-height: 1.125em; border-right: 1px solid #ccc; display: inline-block; cursor: pointer; transition: 0.2s all; }
#sort .sort_wrap li:hover{ color: var(--color-01); }
#sort .sort_wrap li:first-child{ margin: 0;}
#sort .sort_wrap li:last-child{ border: 0;}

#sort .srch_wrap{ float: right; margin: 0; padding: 0; list-style: none; }
#sort .srch_wrap li{ display: inline-block; }
#sort .srch_box{ width: 178px; border: 1px solid #ccc; display: flex;}
#sort .srch_box input{ width: 140px; min-height: auto !important; padding: 0 10px; font-size: .75em; border: 0 !important; border-radius: 0; }
#sort .srch_box button{ width: calc(100% - 140px); padding: 0 5px; background: none; border: 0; }

.dropdown button{ width: 150px; margin: 0px 0; padding: 6px 10px; font-size: .75em; line-height: 1em; background: none; border: 1px solid #ccc; text-align: left;}
.dropdown button.dropdown-toggle::after{ float: right; font-family: "Font Awesome 7 Free"; font-weight: 900; content: '\f107'; border: none; }
.dropdown .dropdown-menu{ width: 200px; max-height: 240px; margin-top: -3px !important; padding: 0; border-radius: 0; overflow-y: auto; }
.dropdown .dropdown-menu li{ width: 100%; font-size: .75em; }
.dropdown .dropdown-menu li .dropdown-item{ padding: 10px 15px; display: block; }
.dropdown .dropdown-menu li .dropdown-item:hover{ background: #ececec; }
.dropdown .dropdown-menu::-webkit-scrollbar { width: 6px; background: #fff;}
.dropdown .dropdown-menu::-webkit-scrollbar-thumb { background: #999; border-radius: 3px;}

.box_wrap{ }
.box_img_wrap{ border-radius: 5px; position: relative; overflow: hidden; }
.box_img{ width: 100%; height: 100%; border: 1px solid #ccc; will-change: transform; transition: 0.3s all; position: relative;}
.box_img img{ width: 100%; height: auto; }
.box_img .box_end{ width: 100%; height: 100%; background: rgba(0, 0, 0, .5); position: absolute; display: flex; align-items: center; justify-content: center; }
.box_img .box_end p{ padding: 5px 10px; color: var(--color-12); border: 1px solid var(--color-12); }
.box_txt_wrap{ margin-top: 10px; }
.box_txt{ padding: 10px; transition: 0.3s all; }
.box_txt p{ height: 63px; margin-bottom: 8px; color: var(--color-10); font-size: .875em; transition: 0.3s all; }
.box_txt span{ color: #666; font-size: .813em; }
.box_txt span i{ margin-right: 5px; }
.box_wrap:hover .box_txt{ background: #ededed; }
.box_wrap:hover .box_txt p{ color: var(--color-10); }

.btn_loadmore{ width: 100%; max-width: 700px; padding: 10px 20px; color: #666; background: var(--color-12); border: 1px solid #ccc; text-align: center; transition: 0.2s all; }
.btn_loadmore:hover{ border: 1px solid #000; }

#i_abt{ background: #fff; position: relative; overflow: hidden; }
.i_abt_bg_1{ width: 437px; height: 411px; background: url('../inc/img/bg-i_abt_01.webp') center center no-repeat; background-size: cover; position: absolute; top: -228px; right: -40px; }
.i_abt_bg_2{ width: 367px; height: 271px; background: url('../inc/img/bg-i_abt_02.webp') center center no-repeat; background-size: cover; position: absolute; bottom: -100px; left: -120px; }
#i_abt .row > div{ display: flex; align-items: center; }
.i_abt_img_wrap{ width: 570px; height: 552px; position: relative; display: flex; align-items: center; justify-content: start; }
.i_abt_img{ width: 500px; position: absolute; z-index: 1; }
.i_abt_img_bg{ width: 500px; height: 434px; background: var(--color-02); position: absolute; z-index: 0; opacity: .45; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); animation: rotation 20s linear infinite; }

@keyframes rotation {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

.gmap{ width: 100%; height: 355px; margin-top: 10px; display: block; }

/* .city-selector-set{ display: flex; } */

.quote_1{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.quote_2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.quote_3{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.quote_4{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

.mustfilled{ color: var(--color-note); font-weight: 700; }

#privacy ul{ margin: 0 0 0 24px; }

#form_srch input[type="text"]{ margin: 0; }

.color_01{ color: var(--color-01); }

#sign{ }
/*** /CNT ***/

/*** PAGINATION ***/
.pagination_wrap{ width: 100%; overflow: hidden; }
.pagination{ float: left; margin: 30px 0 0 0; }
.pagination a{ color: #666; }
.pagination a:hover{ color: #666; background: #f6f6f6; }
.pagination .active .page-link{ background: var(--color-01); border-color: #dee2e6; }

.pagination_jump{ float: right; margin: 30px 0 0 0; padding: 0; list-style: none; }
.pagination_jump select.form-select{ width: auto; min-height: 38px; margin: 0 5px; padding: 0 35px 0 10px; background-color: var(--color-03); border: 1px solid #dee2e6; border-radius: 3px; display: inline-block; cursor: pointer; }
/*** /PAGINATION ***/

/*** FOOTER ***/
footer{ margin: 0; padding: var(--padding-01); color: var(--color-10); background: var(--color-bg2); overflow: hidden; }
footer .social{ text-align: center; }
footer .social a{ width: 40px; height: 40px; margin: 0 12px; color: var(--color-12); font-size: 1.25em; line-height: 38px; background: #818181; border-radius: 50%; display: inline-block; }
footer .privacy{ padding: 40px 0 0 0; border-top: 1px solid #cccccc; text-align: center; }
footer .privacy a{ color: var(--color-10); }
footer .privacy a:hover{ text-decoration: underline; }
/*** /FOOTER ***/

/*** CAPTCHA ***/
#captcha_code{ float: left; width: 120px; text-align: center; }
.captcha_wrap{ float: left; margin: 10px 0 0 10px; }
#captchaimg{ border: var(--border-01); cursor: pointer; }
/*** /CAPTCHA ***/

/*** BTN ***/
.btn{ padding: 10px 18px 12px 18px; border-radius: 5px; }

.btn-primary{ background: var(--color-01) !important; border-color: var(--color-01) !important; }
.btn-primary:hover, .btn-primary:focus{ background: var(--color-02) !important; border-color: var(--color-02) !important;}
/*** /BTN ***/

/*** MODAL ***/
.modal{ z-index: 999999; }
.modal-header{ color: #fff; background: var(--color-01); }
.modal-open { padding-right: 0 !important;}
.modal-backdrop { opacity: .9 !important; }
.modal-content{ position: relative; }
.btn-close-wrap{ background-color: #2faeff; border-radius: 0; border-top-right-radius: 5px; border-bottom-left-radius: 5px; position: absolute; top: 0; right: 0; z-index: 10; }
.btn-close{ padding: 15px 15px; position: absolute; top: 0; right: 0; z-index: 10;}
.modal-body{ padding: 30px 30px 30px 30px; color: #333; overflow: hidden; }
.modal-body h4{ font-weight: 700; line-height: 1.25em; text-align: center; }
.modal-body h4 span{ font-size: .6em; font-weight: 400; display: block; text-transform: uppercase; }
.modal-body button{ margin-top: 5px; margin-bottom: 5px; }
.modal-body a:hover{ color: var(--color-12); }

#popModal .modal-body{ padding: 0;}
#popModal .btn-close-custom{ width: 26px; height: 26px; line-height: 24px; border-radius: 50%; position: absolute; top: 10px; right: 10px; color: #fff; background: #000; }
/*** /MODAL ***/

/*** POPOVER ***/
[data-bs-toggle="popover"]{ cursor: pointer; }
.popover{ padding:5px; border: 5px solid #ccc; border-radius: 10px; }
.popover-arrow{ display: none !important; }
/*** /POPOVER ***/