@charset "utf-8";

/* font */
@font-face{font-family: 'NotoSans'; font-style: normal; font-weight: 300; src: url('/resource/fonts/NotoSansCJKkr-Light.woff2') format('woff2'), url('/resource/fonts/NotoSansCJKkr-Light.woff') format('woff');}
@font-face{font-family: 'NotoSans'; font-style: normal; font-weight: 400; src: url('/resource/fonts/NotoSansCJKkr-Regular.woff2') format('woff2'), url('/resource/fonts/NotoSansCJKkr-Regular.woff') format('woff');}
@font-face{font-family: 'NotoSans'; font-style: normal; font-weight: 600; src: url('/resource/fonts/NotoSansCJKkr-Medium.woff2') format('woff2'), url('/resource/fonts/NotoSansCJKkr-Medium.woff') format('woff');}
@font-face{font-family: 'NotoSans'; font-style: normal; font-weight: 700; src: url('/resource/fonts/NotoSansCJKkr-Bold.woff2') format('woff2'), url('/resource/fonts/NotoSansCJKkr-Bold.woff') format('woff');}
@font-face{font-family: 'HanwhaWeb'; font-style: normal; font-weight: 400; src: url('/resource/fonts/Hanwha-Light.woff2') format('woff2'), url('/resource/fonts/Hanwha-Light.woff') format('woff');}
@font-face{font-family: 'HanwhaWeb'; font-style: normal; font-weight: 600; src: url('/resource/fonts/Hanwha-Bold.woff2') format('woff2'), url('/resource/fonts/Hanwha-Bold.woff') format('woff');}
@font-face{font-family: 'HanwhaWeb'; font-style: normal; font-weight: 700; src: url('/resource/fonts/Hanwha-Bold.woff2') format('woff2'), url('/resource/fonts/Hanwha-Bold.woff') format('woff');}
@font-face {font-family: 'Forena'; font-style: normal; font-weight: normal;  src: url('/resource/fonts/Forena.woff2') format('woff2'), url('/resource/fonts/Forena.woff') format('woff');}
@font-face{font-family: 'NotoSerif'; font-style: normal; font-weight: 100; src: url('/resource/fonts/NotoSerif-Thin.ttf') format('ttf');}
@font-face{font-family: 'NotoSerif'; font-style: normal; font-weight: 200; src: url('/resource/fonts/NotoSerif-Light.ttf') format('ttf');}
@font-face{font-family: 'NotoSerif'; font-style: normal; font-weight: 300; src: url('/resource/fonts/NotoSerif-Regular.ttf') format('ttf');}
@font-face{font-family: 'NotoSerif'; font-style: normal; font-weight: 400; src: url('/resource/fonts/NotoSerif-Medium.ttf') format('ttf');}
@font-face{font-family: 'NotoSerif'; font-style: normal; font-weight: 500; src: url('/resource/fonts/NotoSerif-SemiBold.ttf') format('ttf');}
@font-face{font-family: 'NotoSerif'; font-style: normal; font-weight: 600; src: url('/resource/fonts/NotoSerif-Bold.ttf') format('ttf');}
@font-face{font-family: 'NotoSerif'; font-style: normal; font-weight: 700; src: url('/resource/fonts/NotoSerif-Black.ttf') format('ttf');}
@font-face{font-family: 'NotoSerifKR'; font-style: normal; font-weight: 100; src: url('/resource/fonts/NotoSansCJKkr-Light.ttf') format('ttf');}
@font-face{font-family: 'NotoSerifKR'; font-style: normal; font-weight: 200; src: url('/resource/fonts/NotoSansCJKkr-Regular.ttf') format('ttf');}
@font-face{font-family: 'NotoSerifKR'; font-style: normal; font-weight: 300; src: url('/resource/fonts/NotoSansCJKkr-Medium.ttf') format('ttf');}
@font-face{font-family: 'NotoSerifKR'; font-style: normal; font-weight: 500; src: url('/resource/fonts/NotoSansCJKkr-SemiBold.ttf') format('ttf');}
@font-face{font-family: 'NotoSerifKR'; font-style: normal; font-weight: 700; src: url('/resource/fonts/NotoSansCJKkr-Bold.ttf') format('ttf');}
@font-face{font-family: 'NotoSerifKR'; font-style: normal; font-weight: 900; src: url('/resource/fonts/NotoSansCJKkr-Black.ttf') format('ttf');}

/* reset */
html{-webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch;}
body{font-family: 'NotoSans', sans-serif; font-weight: 400; font-size: 18px; color: #999; line-height: 1.6; word-break: keep-all; word-wrap: break-word;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td, a, strong, span, em, button, textarea, header, footer, nav, section, aside, article{margin: 0; padding: 0; box-sizing: border-box; -webkit-overflow-scrolling: touch;}
h1, h2, h3, h4, h5, h6{font-weight: 400;}
ul, ol, li{list-style: none;}
legend, caption{font-size: 0; width: 0; height: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
hr{position: absolute; left: -1000%; top: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden;}
fieldset{border: none;}
a{text-decoration: none; color: inherit;}
a:hover, a:active, a:visited{text-decoration: none;}
img{border: 0; vertical-align: top;}
button, input, select, textarea{font-family: inherit; font-size: inherit; color: inherit; line-height: 1.6; vertical-align: middle;}
button{border: 0; border-radius: 0; background-color: transparent; cursor: pointer; text-align: left; letter-spacing: inherit;}
em, address{font-style: normal;}
table{width: 100%; table-layout: fixed; border-collapse: collapse;}
th{font-weight: 700;}
label{vertical-align: middle; cursor: pointer;}
strong{font-weight: 700;}
sup{font-size: 10px;}
mark{background-color: #fff;}
.skip_nav{position: fixed; z-index: 9999; left: 0; top: 0; width: 100%;}
.skip_nav a{display: block; position: absolute; top: 0; left: 0; width: 100%; margin-top: -50px; height: 50px; line-height: 50px; text-align: center; color: #fff; background-color: #f60;}
.skip_nav a:focus, .skip_nav a:active{margin-top: 0; -webkit-transition: margin .3s ease-in-out; transition: margin .3s ease-in-out;}
.blind{position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
input[type=text]::-ms-clear{display: none;}
.va1 {vertical-align: 1px;}
.bigger {font-size: 113% !important;}
.underline {text-decoration: underline !important;}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt36 {margin-top: 36px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb30 {margin-bottom:30px;}
.ml0 {margin-left: 0 !important;}
.pt0 {padding-top: 0 !important;}
.pb0 {padding-bottom: 0 !important;}

.orange {color: #de6a20 !important;}
.orange2 {color: #e7a072 !important;}
.txt_hanwha {font-family: 'HanwhaWeb', sans-serif; line-height: 1; vertical-align: 1px;}
.txt_batang {font-family: 'BatangChe', serif;}
.txt_notoSerif {font-family: 'NotoSerif', serif; font-weight: 300;}
.txt_notoSerifKR {font-family: 'NotoSerifKR', serif; font-weight: 300;}

body {font-family: 'NotoSans', sans-serif; color: #aaa; font-size: 20px; background-color: #1b1b1b;}

.wrap{overflow: hidden; position: relative; min-width: 1200px;}
.container {margin:0 auto; width: 1200px;}
.content{position: relative; width: 100%; padding-top: 77px; padding-bottom: 150px; letter-spacing: -0.03em;}
.content p {font-weight: 100;}
.breadcrumb {display: flex; justify-content: space-between; align-items: center; margin-bottom: 210px;}
.breadcrumb p {color: #7a7a7a; font-size: 24px; letter-spacing: 5px;}
.breadcrumb .eng {font-size: 23px; letter-spacing: 5px;}
.btn_move_top {color: #fff; border-bottom-color: #fff;}
.footer {padding: 35px 0; background-color: #000;}
.footer .container {display: flex; justify-content: space-between; align-items: center;}
.footer p {margin: 20px 0 45px; font-size: 16px; line-height: 25px;}
.footer small {color: #666; font-size: 14px;}
.footer .sns {display: flex; gap:24px; align-items: center;}

.title .txt_notoSerifKR {letter-spacing: 1.5px;}
.title h1 {margin: 18px 0 30px; font-size: 120px; color: #fff; line-height: 1.15;}
.quote {display: flex; justify-content: space-between; margin-top: 120px; padding-bottom: 200px;}
.quote .txt_quote {position: relative; padding: 40px 0; color: #fff; font-size: 36px; line-height: 60px;}
.quote .txt_quote:before, .quote .txt_quote:after {position: absolute; display: block; font-size: 50px; content: "";}
.quote .txt_quote:before {content: "“"; left:-30px; top:0;}
.quote .txt_quote:after {content: "”"; left:-5px; bottom:-35px;}
.quote .txt_bg {font-size: 60px; line-height: 65px; text-align: right; color: #3e3e3e;}
.quote .txt_bg i {display:block; margin-top: 48px; font-size: 110px; letter-spacing: 15px;}

.gallery {margin-top: 180px;}
.gallery .desc {position: relative; margin-bottom: 65px;}
.gallery .desc:before {z-index: -1; position: absolute; display: block; top: 50%; left: -100%; width: 1000%; height: 1px; background-color: #515151; content:"";}
.gallery .desc p {font-size: 24px; line-height: 1; text-align: center;}
.gallery .desc p span {display:inline-block; background-color: #1b1b1b;}
.gallery .desc p span em {position: relative; display: inline-block; top: 5px; padding: 0 15px; vertical-align: bottom;}
.gallery-container {opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; width: 105%; max-width: 105%; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; position: relative;}
.gallery-container.is-loaded {opacity: 1; visibility: visible;}
.splide {width: 100%; height: 440px;}
.splide__track {overflow: visible !important; height: 100%;}
.splide__list {height: 100%;}
.splide__slide {width: auto !important; flex-shrink: 0; height: 100%; position: relative; overflow: hidden; cursor: pointer; transition: filter 0.3s ease;}
.splide__slide img {display: block; width: auto; height: 100%; object-fit: cover;}
.slide-info {position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%); display: flex; align-items: flex-end; padding: 35px 33px; opacity: 0; transition: opacity 0.3s ease;}
.slide-info .title {position: relative; color: #fff; font-family: 'NotoSerifKR', serif; font-weight: 100; font-size: 28px; line-height: 1;}
.slide-info .title:before {position: absolute; display: block; top: -12px; left: 0; width: 10px; height: 1px; background-color: #fff; content: "";}
.splide__slide:hover .slide-info {opacity: 1;}
.gallery-container.is-dimmed .splide__slide {filter: brightness(0.4);}
.gallery-container.is-dimmed .splide__slide:hover {filter: brightness(1);}

.modal-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;}
.modal-overlay.is-active {opacity: 1; pointer-events: auto;}
.modal-content { position: relative; max-width: 850px; max-height: 90vh; background-color: #1b1b1b; border: 1px solid #393939; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5);}
.modal-content > img { display: block; max-width: 100%; max-height: 90vh; object-fit: contain;}
.modal-close-btn { position: absolute; padding: 10px; top: 10px; right: 10px; border: none; color: #fff; font-size: 24px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 10; background-color: transparent;}