@charset "UTF-8";

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


/* 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: 1000px; overflow: hidden; min-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: relative; background: #ffffff; border-bottom: 1px solid #e4e8eb; z-index: 10000;}
#header > div.box {position: relative; height: 80px; max-width: 1000px; margin: 0 auto;}
#header h1 {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 140px;}
#header h1 > a {display: block;}
#header h1 > a img {width: 100%;}
#gnb {position: absolute; right: 0; top: 0; height: 100%; font-size: 16px; text-align: center; overflow: hidden; transition: height 0.3s;}
#gnb > ul > li {float: left; position: relative; width: 200px;}
#gnb > ul > li + li {margin-left: 4px;}
#gnb > ul > li + li::before {content: ''; position: absolute; top: 80px; left: -1px; width: 1px; height: 300px; background-color: #e4e8eb;}
#gnb > ul > li > a {font-size: 16px; line-height: 80px; display: block;}
#gnb > ul > li > ul {height: 220px; padding-top: 20px;}
#gnb > ul > li > ul > li + li {margin-top: 4px;}
#gnb > ul > li > ul > li > a {display: block; line-height: 24px; font-size: 13px; font-weight: 300;}
#gnb a {transition: color 0.3s;}
#gnb li.on > a,
#gnb a:hover {color: #d5a167;}
#header::before {content: ''; position: absolute; left: 0; top: calc(100% + 1px); width: 100%; height: 0; box-shadow: none; transition: all 0.3s; background-color: rgba(255, 255, 255, 0.85); /* background: url(/img/gnb-bg-01.png) calc(50% - 333px) bottom no-repeat, #ffffff url(/img/gnb-bg-02.png) calc(50% + 600px) top no-repeat; background-color: #ffffff; background-size: auto 200px, auto 130px; */}
#header.on::before {height: 220px; box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);}
#header.on::after {height: 180px; opacity: 1;}
#header.on #gnb {height: 300px;}
#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 {background: #fafbfc; color: #777777; font-size: 13px; border-top: 1px solid #e4e8eb; font-weight: 300;}
#footer > div.box {position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 0 50px 180px;}
#footer h2 {position: absolute; left: 0; top: 40px; width: 120px; opacity: 0.4;}
#footer ul.link {overflow: hidden; margin-bottom: 15px;}
#footer ul.link li {float: left;}
#footer ul.link li + li:before {content: '|'; margin: 0 12px; font-size: 2px; color: #e4e8eb; position: relative; top: -1px;}
#footer ul.link em {color: #d5a167; font-weight: 500;}
#footer address span.info > span + span::before {content: '|'; position: relative; top: -2px; margin: 0 15px; font-size: 0.9em; color: #e4e8eb;}
#footer address > span + span:not(.address, .email)::before {content: '|'; position: relative; top: -2px; margin: 0 15px; font-size: 0.9em; color: #e4e8eb;}
#footer address > span em {color: #d5a167; font-weight: 400; margin-right: 10px;}
#footer address > span.address {display: block; margin: 3px 0;}
#footer p.copyright {font-size: 12px; margin-top: 10px; color: #999999;}


/* main */
#main-visual {position: relative; background: #ffffff; overflow: hidden;}
#main-visual div.image-slide {font-size: 14px; height: 500px;}
#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 .control a {width: 2.5em;}
#main-visual div.image-slide .control a.prev {left: 10em;}
#main-visual div.image-slide .control a.next {right: 10em;}

#main-brand > div.box {max-width: 1000px; margin: 0 auto; padding: 100px 0 50px 0;}
#main-brand h3.title {font-size: 36px; font-weight: 300; margin-bottom: 40px; text-align: center;}
#main-brand ul.brand-card {display: grid; grid-template-columns: auto auto auto; gap: 20px;}
#main-brand ul.brand-card > li {position: relative; overflow: hidden; border-radius: 10px; height: 180px; 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; transition: transform 0.5s;}
#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-brand ul.brand-card > li > a:hover img {transform: scale(1.1) rotate(5deg);}

#main-collection > div.box {max-width: 1000px; margin: 0 auto; padding: 50px 0 100px 0;}
#main-collection h3.title {font-size: 36px; font-weight: 300; margin-bottom: 40px; text-align: center;}
#main-collection div.image-slide {width: 800px; height: 400px; margin: 0 auto; font-size: 12px;}
#main-collection div.image-slide div.indicator > ul > li + li {margin-left: 4px;}
#main-collection div.image-slide div.indicator a {width: 18px;}
#main-collection div.image-slide div.indicator li.on a {width: 40px;}


/* main popup */
#main-popup {position: fixed; left: 0; top: 0; z-index: 11000; box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.5); 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 {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; max-width: 1000px; margin: 0 auto; padding-bottom: 100px;}

section.main-header {position: relative; margin-bottom: 30px;}
section.main-header h2 {font-size: 36px; font-weight: 300; text-align: center; line-height: 120px;}
#bread-crumb {position: absolute; right: 0; bottom: 15px; font-size: 12px; font-weight: 300; color: #777777;}
#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: 80px;}
section.content {line-height: 1.6;}
section.content h3.title {font-size: 28px; font-weight: 300; color: #d5a167; margin-bottom: 40px;}
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 p.slogan {margin-bottom: 60px;}
body.intro.company p.slogan span {font-size: 16px; font-weight: 300; display: block; margin-bottom: 10px;}
body.intro.company p.slogan em {font-size: 40px; color: #d5a167; font-weight: 700;}
body.intro.company div.image-slide {height: auto; width: 60%; 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: 34px; min-width: 180px; border: 1px solid #e0e0e0; background-color: #ffffff; border-radius: 20px; font-size: 14px; color: #888888; margin-right: 30px; margin-bottom: 10px; padding: 0 20px;}

div.history {position: relative; font-size: 14px; 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: 24px; font-weight: 400; color: #d5a167; padding-left: 50px;}
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: 40px;}
div.history ul {margin-left: 80px; margin-top: 10px;}
div.history ul > li {padding-left: 34px; text-indent: -44px; position: relative;}
div.history ul > li::before {content: ''; position: absolute; left: -62px; top: 11px; width: 10px; height: 10px; background-color: #cccccc; border-radius: 100px;}
div.history ul > li + li {margin-top: 5px;}
div.history ul > li em.month {font-size: 20px; font-weight: 400; color: #d5a167; margin-right: 18px;}

div.image-slide.brand {height: 500px; font-size: 14px;}
div.brand-intro {font-size: 14px; 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 {float: left; width: 48%; position: relative;}
div.store-info > div.left ul.store {position: relative; height: 100%; overflow: auto; margin-bottom: 30px;}
div.store-info > div.left ul.store > li {position: relative; padding: 15px 90px 15px 20px;}
div.store-info > div.left ul.store > li + li {border-top: 1px solid #e0e0e0;}
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 > * {display: block;}
div.store-info > div.left ul.store > li em.title {font-size: 16px; 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 > div.right {margin-left: 4%; background-color: #f9f9f9;}
div.store-info .naver-map {position: relative; height: 300px; 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: 500px;}

ul.contact-info {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 20px;}
ul.contact-info > li {position: relative;}
ul.contact-info > li > em i {color: #d5a167; font-size: 30px; vertical-align: middle; margin-right: 10px;}
ul.contact-info > li > em {margin-right: 20px;}


/* module */
div.image-slide {position: relative; height: 460px; 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.2em; 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: 6em;}
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: 2.5em; 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.banner-slide {position: relative; height: 70px; margin: 0 auto; border: 1px solid #e0e0e0; padding: 0 30px; background-color: #ffffff;}
div.banner-slide > .container {position: relative; height: 100%; overflow: hidden;}
div.banner-slide ul.banner {position: absolute; left: 0; top: 0; width: 5000px; height: 100%;}
div.banner-slide ul.banner > li {float: left; height: 100%; padding: 10px 15px; min-width: 100px;}
div.banner-slide ul.banner > li + li {margin-left: 10px;}
div.banner-slide ul.banner > li > a {position: relative; display: block; height: 100%;}
div.banner-slide ul.banner > li > a img {position: relative; height: 40px; top: 50%; transform: translate(0, -50%);}
div.banner-slide a.prev,
div.banner-slide a.next {position: absolute; top: 0; width: 30px; height: 100%; background-color: #ffffff;}
div.banner-slide a.prev {left: 0; border-right: 1px solid #e0e0e0;}
div.banner-slide a.next {right: 0; border-left: 1px solid #e0e0e0;}
div.banner-slide a.prev img,
div.banner-slide a.next img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; transition: all 0.1s;}
div.banner-slide a.prev:active img {left: calc(50% - 5px);}
div.banner-slide a.next:active img {left: calc(50% + 5px);}
div.banner-slide a.play {position: absolute; padding: 1px 5px 1px 6px; bottom: 4px; right: 40px; border: 1px solid #e0e0e0; background-color: rgba(255, 255, 255, 0.6); font-size: 12px; overflow: hidden; transition: all 0.3s; border-radius: 2px; color: #d5a167;}
div.banner-slide a.play:hover {background-color: #d5a167; color: #ffffff;}
div.banner-slide a.play::before {content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 700;}
div.banner-slide a.play span {position: absolute; left: -999px;}
div.banner-slide a.play span:nth-of-type(1) {display: block;}
div.banner-slide a.play span:nth-of-type(2) {display: none;}
div.banner-slide a.play.on::before {content: '\f04c';}
div.banner-slide a.play.on span + span {display: block;}
div.banner-slide a.play.on span:nth-of-type(1) {display: none;}
div.banner-slide a.play.on span:nth-of-type(2) {display: block;}


div.regulation-form {border: 2px solid #e0e0e0; padding: 40px 30px; font: 13px; font-weight: 300;}
div.regulation-form h3 {font-size: 20px; 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: 16px; margin: 20px 0 15px 0; font-weight: 400;}
div.regulation-form p {font-size: 14px; 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: 18px; 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;}





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

div.youtube {text-align: center; margin: 30px 0;}


/* EOF */