@charset "UTF-8";

/* reset */
.pc {display: none !important;}
br.only-pc {content: ''; display: none;}
br.only-pc::after {content: '\00a0';}
table.content colgroup {display: none;}

/* common */
html {font-family: 'NotoSansKR', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 14px; color: #333333; background: #ffffff; line-height: 1.4;}
#wrapper {min-width: 320px; max-width: 1024px; overflow: hidden; min-height: 100vh; padding-top: 60px;}
#wrapper.no-scroll {height: 100vh;}
#skip-nav {position: fixed; left: 0; top: -40px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.7); transition: top 0.3s; z-index: 100000;}
#skip-nav:focus {top: 0;}
#header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-color: #ffffff; border-bottom: 1px solid #e5e5e5; z-index: 10000;}
#header-top a.user {position: absolute; right: 60px; top: 50%; transform: translate(0, -50%); font-size: 12px; overflow: hidden;}
#header-top a.user span.face {display: block; width: 30px; height: 30px; border: 1px solid #e0e0e0; border-radius: 100px; background: #ffffff url(/img/common/icon_face.png) center center no-repeat; background-size: cover;}
#header-top a.user span.message {position: absolute; left: -999px;}
#header h1 {position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); width: 100px; font-size: 1px;}
#header h1 a {display: block;}
#header a.menu {display: block; width: 24px; height: 16px; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%);}
#header a.menu::before {content: ''; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: 100%; height: 2px; background-color: #453d3d; transition: all 0.3s;}
#header a.menu span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 2px; background-color: #453d3d; text-indent: -9999px; transition: all 0.3s;}
#header a.menu::after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 100%; height: 2px; background-color: #453d3d; transition: all 0.3s;}
#header a.menu.close::before {transform: translate(-50%, -50%) rotate(32deg); top: 50%; width: 120%;}
#header a.menu.close span {opacity: 0;}
#header a.menu.close::after {transform: translate(-50%, 50%) rotate(-32deg); bottom: 50%; width: 120%;}

#gnb {position: fixed; left: 100%; top: 60px; width: 100%; height: calc(100vh - 60px); background-color: #ffffff; padding: 20px; z-index: 10000; overflow: auto; transition: left 0.3s;}
#gnb.open {left: 0;}
#gnb > ul {padding-bottom: 100px; font-weight: 300;}
#gnb > ul > li {border-bottom: 1px solid #e8e8e8; overflow: hidden; padding: 10px 0 15px 0;}
#gnb > ul > li > a {position: relative; font-size: 20px; padding-left: 15px; line-height: 40px;}
#gnb > ul > li > a::before {content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 10px; background-color: #d5a167;}
#gnb > ul > li > ul {padding-left: 10px;}
#gnb > ul > li > ul > li {float: left; width: 50%; margin-bottom: 2px;}
#gnb > ul > li > ul > li.sub {width: 100%;}
#gnb > ul > li > ul > li > a {line-height: 2.4em;}
#gnb > ul > li > ul > li.sub > a {color: #d5a167; font-size: 16px; font-weight: 500;}
#gnb > ul > li > ul > li > ul {margin: 15px 0 10px 0; overflow: hidden;}
#gnb > ul > li > ul > li > ul > li {float: left; width: 50%;}
#gnb > ul > li > ul > li > ul > li > a {line-height: 1.8em;}
#gnb > ul a {display: block; padding-left: 10px;}
#gnb > ul li.on > a {color: #d5a167; font-weight: 500;}

#main-before {position: fixed; width: 200px; left: -200px; text-align: center; line-height: 40px; color: #ffffff; background-color: rgba(0, 0, 0, 0.6); z-index: 10000; transition: left 0.3s;}
#main-before:focus {left: 0;}

#footer {position: relative; background: #fafbfc; color: #777777; font-size: 12px; font-weight: 300; border-top: 1px solid #e4e8eb; padding: 20px 15px 40px 15px;}
#footer h2 {width: 120px; margin-bottom: 20px; opacity: 0.5;}
#footer ul.link {overflow: hidden; margin-bottom: 20px;}
#footer ul.link li {float: left;}
#footer ul.link li + li:before {content: '|'; margin: 0 8px; font-size: 2px; color: #e4e8eb; position: relative; top: -1px;}
#footer ul.link em {color: #d5a167; font-weight: 400;}
#footer address > span {display: block;}
#footer address > span + span {margin-top: 3px;}
#footer address span.info > span {display: inline-block;}
#footer address span.info > span + span::before {content: '|'; position: relative; top: -2px; margin: 0 8px; font-size: 0.9em; color: #e4e8eb;}
#footer address span em {color: #d5a167; font-weight: 400; margin-right: 10px;}
#footer p.copyright {margin-top: 20px; font-size: 11px; color: #999999; text-align: center;}



/* main */
#main-visual {position: relative; background: #ffffff; overflow: hidden;}
#main-visual div.image-slide {height: auto;}
#main-visual div.image-slide ul.slide > li {background: #ffffff url(/img/main-visual-01.jpg) center center no-repeat; background-size: cover; text-indent: -9999px;}
#main-visual div.image-slide a.prev,
#main-visual div.image-slide a.next {display: none;}
#main-visual div.image-slide div.indicator > ul > li + li {margin-left: 10px;}
#main-visual div.image-slide div.indicator a {width: 30px;}

#main-brand > div.box {padding: 60px 15px 30px 15px;}
#main-brand h3.title {font-size: 26px; font-weight: 300; margin-bottom: 30px; text-align: center;}
#main-brand ul.brand-card {display: grid; grid-template-columns: auto auto; gap: 10px;}
#main-brand ul.brand-card > li {position: relative; overflow: hidden; border-radius: 10px; height: 30vw; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);}
#main-brand ul.brand-card > li > a {display: block; height: 100%;}
#main-brand ul.brand-card > li img {width: 100%; height: 100%; object-fit: cover;}
#main-brand ul.brand-card > li em {position: absolute; left: 0; bottom: 0; width: 100%; line-height: 30px; color: #ffffff; text-align: center; font-size: 13px; font-weight: 300; background-color: rgba(0, 0, 0, 0.3);}

#main-collection > div.box {padding: 30px 15px 60px 15px;}
#main-collection h3.title {font-size: 26px; font-weight: 300; margin-bottom: 30px; text-align: center;}
#main-collection div.image-slide {height: 50vw; margin: 0 auto; font-size: 10px;}
#main-collection div.image-slide div.indicator > ul > li + li {margin-left: 2px;}
#main-collection div.image-slide div.indicator a {width: 4px; height: 6px;}
#main-collection div.image-slide div.indicator li.on a {width: 40px; height: 6px;}



/* main popup */
#main-popup {position: fixed; left: 0; top: 0; max-width: 90%; z-index: 11000; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3); display: none;}
#main-popup div.header {height: 45px; background: #45a569; position: relative;}
#main-popup div.header h2 {position: absolute; left: 10px; top: 8px;}
#main-popup div.header a.close {position: absolute; right: 0; top: 0; width: 45px; height: 45px; display: block; text-indent: -9999px; overflow: hidden; background: #278f4e url(/img/popup_btn_close.png) center center no-repeat;}
#main-popup div.footer body img {width: 100% !important;}
#main-popup div.footer {line-height: 30px; background: #45a569; color: #ffffff; padding: 0 20px; text-align: right;}
#main-popup div.footer input {margin-right: 3px;}


/* sub (common) */
body.sub #main {position: relative; padding: 0 15px 50px 15px;}

section.main-header {position: relative; margin-bottom: 20px;}
section.main-header h2 {font-size: 28px; font-weight: 300; text-align: center; line-height: 100px;}
#bread-crumb {position: absolute; right: 0; bottom: 5px; font-size: 12px; font-weight: 300; color: #777777; font-size: 12px;}
#bread-crumb li {float: left;}
#bread-crumb li + li:before {content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 700; margin: 0 12px; font-size: 10px; color: #aaaaaa;}
#bread-crumb li a {transition: color 0.3s;}
#bread-crumb li a:hover {color: #d5a167; text-decoration: underline;}
#bread-crumb li em {color: #d5a167;}

body.sub #main section.content + section.content {margin-top: 60px;}
section.content {line-height: 1.6;}
section.content h3.title {font-size: 24px; font-weight: 300; color: #d5a167; margin-bottom: 20px;}
section.content h3.hidden {position: absolute; left: -9999px;}

body.intro.company section {text-align: center;}
body.intro.company h3.title {margin-top: 60px; margin-bottom: 20px;}
body.intro.company h3.title span {display: block; font-size: 16px;}
body.intro.company p.slogan {margin-bottom: 60px;}
body.intro.company p.slogan span {font-size: 14px; font-weight: 300; display: block; margin-bottom: 10px;}
body.intro.company p.slogan em {font-size: 28px; color: #d5a167; font-weight: 700;}
body.intro.company div.image-slide {height: auto; font-size: 12px; display: inline-block;}
body.intro.company div.image-slide div.indicator {display: none;}
body.intro.company div.image-slide .control a {display: none;}
body.intro.company div.image-slide span.bar {display: none;}
body.intro.company ul.brand {text-align: center;}
body.intro.company ul.brand > li {display: inline-block; line-height: 28px; min-width: 120px; border: 1px solid #e0e0e0; background-color: #ffffff; border-radius: 20px; font-size: 14px; color: #888888; margin-right: 10px; margin-bottom: 10px; padding: 0 10px;}

div.history {position: relative; font-size: 12px; color: #666666; font-weight: 300;}
div.history::before {content: ''; position: absolute; left: 22px; top: 20px; width: 2px; height: calc(100% - 40px); background-color: #ddeff0;}
div.history h4.year {position: relative; font-size: 20px; color: #d5a167; padding-left: 50px; font-weight: 400;}
div.history h4.year::before {content: ''; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); width: 16px; height: 16px; border: 2px solid #d5a167; background-color: #ffffff;}
div.history h4.year::after {content: ''; position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); width: 10px; height: 10px; background-color: #d5a167;}
div.history ul + h4.year {margin-top: 30px;}
div.history ul {margin-left: 50px; margin-top: 10px;}
div.history ul > li {padding-left: 30px; text-indent: -30px; position: relative;}
div.history ul > li::before {content: ''; position: absolute; left: -31px; top: 8px; width: 8px; height: 8px; background-color: #cccccc; border-radius: 100px;}
div.history ul > li + li {margin-top: 3px;}
div.history ul > li em.month {font-size: 16px; font-weight: 700; color: #d5a167; margin-right: 10px; font-weight: 400;}

div.image-slide.brand {height: 50vw; font-size: 12px;}
div.brand-intro {font-size: 13px; font-weight: 300; overflow: hidden; margin-top: 30px;}
div.brand-intro * + p {margin-top: 15px;}
ul.brand-link {float: right; font-size: 24px;}
ul.brand-link > li {float: left;}
ul.brand-link > li + li {margin-left: 10px;}

div.store-info {position: relative; overflow: hidden; font-size: 14px; font-weight: 300;}
div.store-info > div {position: relative; margin-bottom: 10px;}
div.store-info > div.left ul.store {position: relative; margin-bottom: 20px;}
div.store-info > div.left ul.store > li {position: relative; padding: 15px 90px 15px 20px;}
div.store-info > div.left ul.store > li.on::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #d5a167; box-sizing: border-box;}
div.store-info > div.left ul.store > li + li {border-top: 1px solid #e0e0e0;}
div.store-info > div.left ul.store > li > * {display: block;}
div.store-info > div.left ul.store > li em.title {font-size: 15px; font-weight: 500;}
div.store-info > div.left ul.store > li span.address {margin: 2px 0; font-size: 13px;}
div.store-info > div.left ul.store > li span.contact::before {content: '\f095'; font-family: 'Font Awesome 6 Free'; font-weight: 700; margin-right: 10px; color: #d5a167;}
div.store-info > div.left ul.store > li a.store {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); width: 70px; line-height: 24px; border: 1px solid #d5a167; text-align: center; font-size: 12px;}
div.store-info .naver-map {position: relative; height: 250px; border: 2px solid #e0e0e0; display: none;}
div.store-info .naver-map.on {display: block;}
div.store-info div.image-slide {font-size: 12px; height: auto; display: none;}
div.store-info div.image-slide.on {display: block;}

#naver-map.way {position: relative; height: 300px;}

ul.contact-info {font-size: 16px;}
ul.contact-info > li {position: relative;}
ul.contact-info > li + li {margin-top: 10px;}
ul.contact-info > li > em i {color: #d5a167; font-size: 24px; vertical-align: middle; margin-right: 10px;}
ul.contact-info > li > em {margin-right: 20px;}


/* module */
div.image-slide {position: relative; height: 600px; font-size: 20px;}
div.image-slide > div.container {position: relative; overflow: hidden; height: 100%;}
div.image-slide > div.container p.bg {position: relative; opacity: 0.1;}
div.image-slide ul.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.image-slide ul.slide > li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; background: url() center center no-repeat; background-size: cover;}
div.image-slide ul.slide > li.on {display: block;}
div.image-slide ul.slide > li > a {display: block; height: 100%; text-indent: -9999px; overflow: hidden;}
div.image-slide span.bar {position: absolute; left: 0; bottom: 0; width: 0%; height: 0.3em; z-index: 100; background-color: rgba(0, 0, 0, 0.2);}
div.image-slide span.bar.on {animation: image-slide-bar 3s linear 0s 1 normal forwards;}
div.image-slide .indicator {position: absolute; bottom: 1em; left: 0; width: 100%; text-align: center;}
div.image-slide .indicator ul {display: inline-block; vertical-align: middle;}
div.image-slide .indicator ul > li {float: left;}
div.image-slide .indicator ul > li + li {margin-left: 0.8em;}
div.image-slide .indicator ul > li > a {display: block; width: 2em; height: 0.4em; background-color: rgba(255, 255, 255, 0.8); border-radius: 100px; overflow: hidden; text-indent: -999px; transition: width 0.3s; border: 1px solid #d5a167;}
div.image-slide .indicator ul > li.on > a {background-color: #d5a167; width: 4em;}
div.image-slide .indicator a.play {display: inline-block; vertical-align: middle; font-size: 1em; overflow: hidden; transition: all 0.3s; border-radius: 2px; color: #d5a167; margin-left: 1em;}
div.image-slide .indicator a.play::before {content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 700;}
div.image-slide .indicator a.play span {position: absolute; left: -999px;}
div.image-slide .indicator a.play span:nth-of-type(1) {display: block;}
div.image-slide .indicator a.play span:nth-of-type(2) {display: none;}
div.image-slide .indicator a.play.on::before {content: '\f04c';}
div.image-slide .indicator a.play.on span + span {display: block;}
div.image-slide .indicator a.play.on span:nth-of-type(1) {display: none;}
div.image-slide .indicator a.play.on span:nth-of-type(2) {display: block;}
div.image-slide .control a.prev,
div.image-slide .control a.next {position: absolute; top: 50%; transform: translate(0, -50%); width: 2em; height: 10em; transition: all 0.3s;}
div.image-slide .control a.prev {left: 1em;}
div.image-slide .control a.next {right: 1em;}
div.image-slide .control a.prev:hover,
div.image-slide .control a.next:hover {background-color: rgba(0, 0, 0, 0.1);}
div.image-slide .control a.prev img,
div.image-slide .control a.next img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; transition: all 0.1s;}
div.image-slide .control a.prev:active img {left: calc(50% - 0.3em);}
div.image-slide .control a.next:active img {left: calc(50% + 0.3em);}
@keyframes image-slide-bar {
    0% {width: 0%;}
    100% {width: 100%;}
}

div.regulation-form {border: 2px solid #e0e0e0; padding: 30px 15px; font: 12px; font-weight: 300;}
div.regulation-form h3 {font-size: 16px; text-align: center; margin-top: 50px; margin-bottom: 30px; font-weight: 400;}
div.regulation-form h3:first-child {margin-top: 0;}
div.regulation-form h4 {font-size: 14px; margin: 20px 0 15px 0; font-weight: 400;}
div.regulation-form p {font-size: 13px; margin: 6px 0;}
div.regulation-form p.num {padding-left: 18px; text-indent: -18px;}
div.regulation-form p.num span {margin-right: 10px;}
div.regulation-form p.desc {font-size: 13px; padding-left: 15px; text-indent: -15px;}
div.regulation-form ul.list {margin: 5px 0 5px 20px; font-size: 13px;}
div.regulation-form ul.sub {margin: 5px 0 5px 10px; font-size: 13px;}
div.regulation-form ul.sub ul {padding-left: 10px;}
div.regulation-form table {font-size: 12px; width: 100%;}
div.regulation-form table th,
div.regulation-form table td {border: 1px solid #e0e0e0; padding: 4px 8px;}



/* popup */
#popup-wrapper {height: 100vh; padding: 60px 0 30px 0; overflow: hidden; background: #ffffff;}
#popup-header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-image: linear-gradient(to right, #d5a167, #a6ac1a); z-index: 10000; color: #ffffff;}
#popup-header h1 {position: absolute; left: 30px; top: 50%; transform: translate(0, -50%); font-size: 24px;}
#popup-header a.close {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); font-size: 30px;}
#popup-main {height: 100%; overflow: auto; padding: 20px 20px 50px 20px;}
#popup-main > section + section {margin-top: 50px;}
#popup-main .title {position: relative; font-size: 20px; padding-left: 25px; margin-bottom: 15px;}
#popup-main .title::before {content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border: 3px solid #d5a167; border-radius: 50px;}
#popup-main .title em {color: #d5a167;}
#popup-footer {position: fixed; left: 0; bottom: 0; width: 100%; height: 30px; background-image: linear-gradient(to right, #d5a167, #777777); z-index: 10000; color: #ffffff; font-size: 11px;}
#popup-footer p.copyright{line-height: 30px; margin-left: 20px;}
#popup-footer img.logo {height: 16px; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%);}

div.regulation-email {border: 2px solid #e0e0e0; padding: 20px;}
div.regulation-email p + p {margin-top: 20px;}

div.wa img {width: 100%;}


#section-error {margin: 50px auto; padding: 30px; border: 2px solid #e0e0e0; text-align: center;}
#section-error h2 {color: #d5a167; font-size: 24px;}
#section-error h2 i {font-size: 50px; display: block;}
#section-error p.message {font-size: 16px; margin: 20px 0;}
#section-error p.link a {display: inline-block; border: 1px solid #d5a167; background-color: #d5a167; color: #ffffff; padding: 10px 16px; font-size: 16px; border-radius: 4px;}

div.youtube {position: relative; margin: 30px 0; height: 0; padding-top: 56.26%;}
div.youtube iframe {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

/* EOF */