:root { --max-container: 1400px; --navy: #051766; --navy-dark: #0c1e6a; --blue: #57bbeb; --text-dark: #212121; --text-muted: #556677; --text-light: #6a7f95; --text-light-2: #8899aa; --line: #dbe2e9; --line-2: #c4ccd4; --bg-soft: #eff2f5; --bg-muted: #a6b2bf; --danger: #da291c; --btn-hover: #26A6E3; } 


/******************************************************

font

*******************************************************/
@font-face { font-family: "HanjinGroupSans"; font-weight: 300; font-style: normal; src:
 url("../assets/fonts/HanjinGroupSans-Light.otf") format("opentype"),
 url("../assets/fonts/HanjinGroupSans-Light.woff") format("woff"),
 url("../assets/fonts/HanjinGroupSans-Light.ttf") format("truetype"),
 url("../assets/fonts/HanjinGroupSans-Light.woff2") format("woff2"); } 
 
 @font-face { font-family: "HanjinGroupSans"; font-weight: 400; font-style: normal; src:
 url("../assets/fonts/HanjinGroupSans-Regular.otf") format("opentype"),
 url("../assets/fonts/HanjinGroupSans-Regular.woff") format("woff"),
 url("../assets/fonts/HanjinGroupSans-Regular.ttf") format("truetype"),
 url("../assets/fonts/HanjinGroupSans-Regular.woff2") format("woff2"); } 
 
 @font-face { font-family: "HanjinGroupSans"; font-weight: 700; font-style: normal; src:
 url("../assets/fonts/HanjinGroupSans-Bold.otf") format("opentype"),
 url("../assets/fonts/HanjinGroupSans-Bold.woff") format("woff"),
 url("../assets/fonts/HanjinGroupSans-Bold.ttf") format("truetype"),
 url("../assets/fonts/HanjinGroupSans-Bold.woff2") format("woff2"); } 

/******************************************************

common

*******************************************************/
* { box-sizing: border-box; } 
body { overflow-x: hidden; } 
.container { width: var(--max-container); margin: 0 auto; } 
.full-sec { height: 100vh; overflow: hidden; } 

@media screen and (max-width: 1400px){
 .container { width: 100%; padding: 0 20px; } 
 }


/******************************************************

header

*******************************************************/

#header { position: fixed; top: 0; z-index: 999; width: 100%; transition: all .7s; } 
.sub-header { padding: 12px 0; background-color: rgba(255, 255, 255, 0.16); } 
.sub-header .container, .main-header .container { display: flex; justify-content: space-between; height: 100%; } 
.sub-header .container ul { display: flex; gap: 24px; } 
.sub-header a { font-size: 14px; font-weight: 500; line-height: 150%; } 
.sub-header .container > a { display: flex; align-items: center; gap: 4px; } 
.sub-header .container ul a { color: #36414C; } 

.main-header { position: relative; height: 90px; } 
.logo { display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 203px; height: 49px; background: url(../assets/images/jeju-logo.png); background-position: 0 0; transition: all .3s; background-repeat: no-repeat; } 
.main-header .container { position: relative; } 

.main-header nav { display: flex; gap: 80px; } 
.main-header nav a { display: flex; align-items: center; font-family: "HanjinGroupSans"; font-size: 20px; font-weight: 700; line-height: 150%; color: #fff; transition: all .3s; } 
.main-header .tnb-wrap { display: flex; align-items: center; gap: 19px; } 
.main-header .tnb-wrap a { position: relative; } 
.basket { display: flex; justify-content: center; align-items: center; position: absolute; right: -8px; top: 0; width: 20px; height: 20px; border-radius: 100%; background-color: var(--blue); } 
.basket span { transform: translate(0px, -1px); font-family: "HanjinGroupSans"; font-size: 16px; font-weight: 700; line-height: 12px; color: #fff; } 

/* header on */
#header.hide { top: -100%; } 
#header.on { background-color: #fff; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06); } 
#header.on .sub-header { border-bottom: 1px solid var(--line); } 
#header.on .sub-header ul a { color: var(--text-light); } 
#header.on .logo { background-position: 0 -49px; } 
#header.on nav a { color: #000; } 

/******************************************************

visual

*******************************************************/
.visual { overflow: hidden; position: relative; height: 100vh; } 
.visual:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); } 
.visual video { width: 100vw; } 
.visual-txt-wrap, .scroll-wrap { position: absolute; } 
.visual-txt-wrap { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; } 
.visual-txt-wrap h1 { margin-bottom: 32px; font-family: "HanjinGroupSans"; font-size: 60px; font-weight: 700; line-height: 180%; } 
.visual-txt-wrap p { font-family: "HanjinGroupSans"; font-size: 28px; font-weight: 400; line-height: 150%; } 
.scroll-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; left: 50%; bottom: 40px; transform: translateX(-50%); } 
.scroll-wrap p { font-family: "HanjinGroupSans"; font-size: 18px; font-weight: 700; line-height: 140%; text-transform: uppercase; color: #fff; } 
.scroll-wrap img { display: block; animation: scroll 2s linear infinite; } 
@keyframes scroll { 
 0% { transform: translateY(0); } 
 50% { transform: translateY(10px); } 
 100% { transform: translateY(0px); } 
 }

 /******************************************************

about

*******************************************************/
.main-about { overflow:hidden; position: relative; z-index: 1; min-height:100vh; background:#fff; } 
.main-about-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 340px; position: relative; z-index: 100; width: 100%; height: 100%; padding-top: 15px; } 
.main-about-wrap .main-about-img-wrap { overflow: hidden; display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 25%; height: 30%; border-radius: 20px 60px 0 60px; } 
.main-about-wrap .main-about-img-wrap figure { position: relative; } 

.main-about-wrap .main-about-img-wrap figure:before { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.30); position: absolute; left: 0; top: 0; } 
.main-about-wrap .main-about-img-wrap img { object-fit: cover; width: 130%; } 
.main-about-wrap > h1 { font-family: "HanjinGroupSans"; font-size: 50px; font-weight: 700; line-height: 150%; color: var(--text-dark); } 
.main-about-wrap > p { text-align: center; font-family: Pretendard; font-size: 20px; font-weight: 500; line-height: 150%; color: var(--text-light-2); } 


.main-about-scroll-txt-wrap { display: flex; flex-direction: column; gap: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; } 
.main-about-scroll-txt-wrap h1 { font-family: "Hanjin Group Sans"; font-size: 50px; font-weight: 700; line-height: 150%; color: #fff; } 

.main-about-scroll-txt-wrap p { font-size: 20px; font-weight: 500; line-height: 150%; color: #fff; } 


/******************************************************

info

*******************************************************/
.sec.main-info { overflow: hidden; position: relative; z-index: 2; margin-top: -100vh; border-radius: 60px 60px 0 0; background-color: #fff; } 
.sec.main-info > .container { display: flex; flex-direction: column; gap: 200px; padding: 200px 0; } 

.main-certificate-wrap { display: flex; gap: 60px; } 
.certificate-desc-box h2 { margin-bottom: 30px; font-family: "HanjinGroupSans"; font-size: 40px; font-weight: 700; line-height: 150%; } 
.certificate-desc-box p { margin-bottom: 52px; font-size: 20px; font-family: "HanjinGroupSans"; font-weight: 500; line-height: 150%; color: var(--text-light); } 
.subscribe-box a span,
.certificate-desc-box span { transform: translateY(1px); } 

.subscribe-box { overflow: hidden; padding: 93px 69px; border-radius: 20px 60px; background: url(../assets/images/jeju-subscribe-img.png); } 
.subscribe-box h2 { margin-bottom: 24px; font-family: "Hanjin Group Sans"; font-size: 28px; font-weight: 700; line-height: 150%; } 


.certificate-desc-box a,
.subscribe-box a { display: flex; align-items: center; justify-content: space-between; width: 140px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line); background-color: rgba(255, 255, 255, 0.30); } 


/******************************************************

footer

*******************************************************/

.site-footer { background: var(--bg-soft); } 
.footer-links { height: 53px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; } 
.footer-links .container { display: flex; align-items: center; gap: 20px; color: var(--text-light); font-size: 14px; font-weight: 600; } 
.footer-main { padding: 30px 0 40px; } 
.footer-inner { display: flex; justify-content: space-between; gap: 40px; } 
.footer-logo { width: 160px; height: 36px; object-fit: contain; margin-bottom: 30px; filter: grayscale(1); } 
.footer-info { color: var(--text-light); font-size: 14px; line-height: 21px; } 
.footer-info .company { font-weight: 700; margin-bottom: 10px; } 
.footer-info p { margin-bottom: 10px; } 
.footer-info p span { font-weight: 600; } 
.footer-info .copyright { margin-top: 14px; } 
.footer-center { width: 172px; color: var(--text-light); } 
.center-title { font-size: 16px; font-weight: 600; line-height: 24px; margin-bottom: 4px; } 
.center-number { white-space: nowrap; margin-bottom: 10px; font-size: 32px; font-weight: 600; line-height: 48px; color: var(--text-muted); } 
.center-hours { font-size: 16px; font-weight: 600; line-height: 24px; }